圣杯布局: 头部和尾部宽度自适应,中间部分分为三列并且中间部分宽度自适应,两边宽度固定。
* {
box-sizing: border-box;
}
body {
text-align: center;
background-color: #ddd;
min-width: 636px;
}
.container {
/* 留白 */
padding-left: 210px;
padding-right: 210px;
/* 清除浮动 */
overflow: hidden;
}
.demo1 header, .demo1 footer {
padding: 10px;
margin: 5px;
background-color: #fff;
}
.demo1 .left, .demo1 .right {
float: left;
width: 200px;
position: relative;
background-color: #fff;
}
.demo1 .main {
float: left;
width: 100%;
background-color: #fff;
}
.demo1 .left {
margin-left: -100%;
left: -205px;
}
.demo1 .right {
margin-left: -200px;
left: 205px;
}
<h1>圣杯布局</h1>
<section class="demo1">
<header> Header内容区 </header>
<div class="container">
<div class="main">
中间弹性区著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处著作权归作者所有。
商业转载请联系作者获得授权,
非商业转载请注明出处</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
<footer> Footer内容区 </footer>
</section>