目录
弹性盒模型实现两栏布局
思路:
首先对html,body设置高度为100%,并且对body设置为相对定位,把头部和底部,用定位的方式固定好,使用弹性盒模型,中间占据剩余的等份,但是由于绝对定位不暂居空间,因此需要设置maging或者padding,距离上下的高度。
然后对main里面进行分割,对main使用弹性盒模型,宽设置好,高度为100%,中间占据剩余空间即可。
HTML
<header>1</header>
<main>
<div class="left">1</div>
<div class="center">3</div>
<div class="right">2</div>
</main>
<footer>3</footer>
CSS
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
height: 40px;
background: yellow;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
main {
flex: 1;
padding: 40px 0;
background: blue;
height: 100%;
display: flex;
}
main .left {
width: 200px;
background: red;
height: 100%;
}
main .center {
flex: 1;
background: orange;
height: 100%;
}
main .right {
width: 200px;
background: pink;
height: 100%;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>