1.给父级盒子设置flex布局 然后使用弹性盒属性使其从上至下显示是
给内容区域flex:1;自适应,左右两侧设置固定宽度。
参考样式
<style>
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
header{
height: 100px;
background: pink;
}
main{
flex: 1;
background: skyblue;
display: flex;
}
aside{
width: 100px;
height: 100%;
background: red;
}
section{
flex: 1
}
article{
width: 100px;
height: 100%;
background: green;
}
footer{
height: 100px;
background: orange
}
</style>
</head>
<body>
<header></header>
<main>
<aside></aside>
<section></section>
<article></article>
</main>
<footer></footer>
</body>```