题目要求:页面分为上下两部分,上面高度固定,宽度自适应,下面宽高都自适应,下面又分为左中右,左右宽度固定高度自适应,中宽高都自适应。
使用flex实现,效果如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
/* 窗口自适应 */
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
.top {
height: 100px;
background-color: aqua;
}
.bottom {
background: red;
flex: 1;
display: flex;
}
.left {
width: 100px;
background: green;
}
.right {
width: 100px;
background: yellow;
}
.middle {
flex: 1;
background: blue;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
也可以使用calc()实现两栏布局和三栏布局,代码参考CSS-宽高自适应。