我想创建一个Box Layout。它应该像我的布局，但扩展到底部。盒子应该在显示器的底部结束。
我尝试用height : 100%;和min-height: 100%;，但盒子没有扩展到底部。
有没有一个解决方案可以从上到下扩展这个盒子，比如从左到右？
* {
box-sizing: border-box;
}
body {
margin: 0;
height:100%;
min-height:100%;
position:relative;
}
.columnsmall {
float: left;
width: 22%;
padding: 10px;
height: 40px;
}
.columnmiddle {
float: right;
width: 34%;
padding: 10px;
height: 40px;
}
.columnbig {
float: left;
width: 66%;
padding:10px;
height: 80px;
}
.row:after {
content: "";
display: table;
clear: both;
}<!DOCTYPE html>
<html>
<body>
<div class="row">
<div class="columnbig" style="background-color:#ddd;">
</div>
<div class="columnmiddle" style="background-color:#aaa;">
</div>
<div class="columnmiddle" style="background-color:#ccc;">
</div>
</div>
<div class="row">
<div class="columnsmall" style="background-color:#aaa;">
</div>
<div class="columnsmall" style="background-color:#bbb;">
</div>
<div class="columnsmall" style="background-color:#ccc;">
</div>
<div class="columnmiddle" style="background-color:#ddd;">
</div>
</div>
</body>
</html>您可以尝试使用flex来构建布局，然后使用％或vh值轻松管理高度/宽度
* {
box-sizing: border-box;
}
body {
margin: 0;
position: relative;
}
.row {
height: 70vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
}
.row:nth-child(2) {
height: 30vh;
flex-direction: row;
}
.columnsmall {
width: 20%;
}
.columnmiddle {
min-height: 50%;
width: 40%;
}
.columnbig {
height: 100%;
width: 60%;
}<div class="row">
<div class="columnbig" style="background-color:#ddd;">
</div>
<div class="columnmiddle" style="background-color:#aaa;">
</div>
<div class="columnmiddle" style="background-color:#ccc;">
</div>
</div>
<div class="row">
<div class="columnsmall" style="background-color:#aaa;">
</div>
<div class="columnsmall" style="background-color:#bbb;">
</div>
<div class="columnsmall" style="background-color:#ccc;">
</div>
<div class="columnmiddle" style="background-color:#ddd;">
</div>
</div>只需添加：
min-height: 100vh;
它将最小高度设置为视口（显示大小）高度。