CSS布局垂直对齐的滚动集装箱

Question

我想知道如何设计CSS3布局如下：

蓝色的容器应该有1％的填充，以
上，右，下，左HTML /身体（在这里涂成黑色）。
橙色容器应可滚动。
绿色容器的高度应与所有其他容器一样高，如

。

我的CSS代码如下至今：

<style> 
.html,body { 
    width: 100%; 
    height: 100%; 
} 

.containerbox { 
    width: 98%; 
    height: 98%; 
    paddding: 1% 1% 1% 1%; // not working yet 
    // todo: horizontal alignment 
    // todo: vertical alignment 
} 

.header { 
    width: 100%; 
    height: 35%%; 
} 
.content { 
    width: 100%; 
    height: 50%; 
} 
.footer { 
    width: 100%; 
    height: 15%%; 
} 
</style> 

这是关于我上面的CSS我的html代码：

<div class="containerbox"> 

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 

</div> 

Answer 1

我的东西的工作。你可以找到它here。

body, html{ 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.blue-container{ 
 
    height: 100%; 
 
    background-color: aqua; 
 
    padding: 1%; 
 
    box-sizing: border-box; 
 
} 
 

 
.green{ 
 
    background-color: green; 
 
} 
 
    
 
.green.big{ 
 
    height: 15%; 
 
} 
 
    
 
.green.small{ 
 
    height: 10%; 
 
} 
 
    
 
.orange{ 
 
    height: 72%; 
 
    overflow-y: scroll; 
 
    background-color: orange; 
 
    margin: 1% 0; 
 
}

<div class="blue-container"> 
 
    <div class="green big"></div> 
 
    <div class="orange"></div> 
 
    <div class="green small"></div> 
 
</div>

附：你只需要为颜色找到合适的值。

Answer 2

我已经做了这个Fiddle。

HTML

<div> 
    <header> 
    </header> 
    <main> 
     Lorem ipsum 
    </main> 
    <footer> 
    </footer> 
</div> 

CSS

*,*:before,*:after{ 
    box-sizing: border-box; 
    position: relative; 
} 

html, body{ 
    height: 100%; 
} 

body{ 
    margin: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #3F47CA; 
    border: 10px solid #000; 
} 

div{ 
    width: 98%; 
    height: 98%; 
} 

header{ 
    height: 12%; 
    background-color: #B5E51D; 
} 

main{ 
    height: calc(80% - 20px); 
    padding: 10px; 
    color: #FFF; 
    margin: 10px 0; 
    background-color: #FFC90D; 
    overflow-y: scroll; 
} 

footer{ 
    height: 8%; 
    background-color: #B5E51D; 
} 

希望这有助于

Answer 3

html{ 
    height: 100%; 
    min-height: 100%; 
} 
body{ 
    min-height: 100%; 
} 
.blue{ 
    height: 100%; 
    padding: 1%; 
} 
.green{ 
    height: 20%; /*of the screen height*/ 
} 
.orange{ 
    height: 30%; /*of the screen height*/ 
    overflow-y: scroll; /*scroll when content's height is more that container's height*/ 
}