题目要求：页面分为上下两部分，上面高度固定，宽度自适应，下面宽高都自适应，下面又分为左中右，左右宽度固定高度自适应，中宽高都自适应。
使用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-宽高自适应。
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
