一、左右两侧,左侧固定宽度200px,右侧自适应占满
- <div class="divBox">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- .divBox{
- height: 500px;
- }
- .left{
- float: left;
- 200px;
- height: 100%;
- }
- .right{
- margin-left: 200px;
- height: 100%;
- }
这个实现起来比较的简单,左侧的div给浮动,右侧的divmargin-left使其从左侧div右侧开始展现,加背景颜色方便观察。
二、左中右三列,左右个200px固定,中间自适应占满
- <div class="divBox">
- <div class="left"></div>
- <div class="right"></div>
- <div class="center"></div>
- </div>
- .divBox{
- height: 500px;
- }
- .left{
- float: left;
- 200px;
- height: 100%;
- }
- .center{
- margin: 0 200px;
- height: 500px;
- }
- .right{
- float: right;
- 200px;
- height: 100%;
- }
三、上中下三行,头部200px高,底部200px高,中间自适应占满
- <div class="divBox">
- <div class="top"></div>
- <div class="center"></div>
- <div class="bottom"></div>
- </div>
- .divBox{
- 100%;
- }
- .top{
- 100%;
- height: 200px;
- position: absolute;
- top: 0;
- }
- .center{
- 100%;
- position: absolute;
- top: 200px;
- bottom: 200px;
- }
- .bottom{
- 100%;
- height: 200px;
- position: absolute;
- bottom: 0;
- }
这里用到了绝对定位,把上面的和下面的分别设置top:0,bottom:0 固定在上下两端,中间的距离上下200px即可。
四、上下两部分,底下这个固定高度200px,如果上面的内容少,那么这个footer就固定在底部,如果内容多,就把footer挤着往下走
- <div class="divBox">
- <div class="content"></div>
- <div class="footer"></div>
- </div>
- html{
- height: 100%;
- }
- body{
- min-height: 100%;
- position: relative;
- }
- .content{
- 100%;
- padding-bottom: 200px;
- }
- .footer{
- 100%;
- height: 200px;
- position: absolute;
- bottom: 0;
- }
固定footer在底部和把foorter往下挤着走都比较容易实现,但是合到一起,就不好弄了吧,其实也不难,更改content的高度,就可以看到效果了
必要的设置就是html要有高度,body的最小高度要有,footer是依照body进行绝对定位的,
了解了这些就不难实现了。
这些只是实现经典布局的一些方法,还有其他的方法,这里就不一一列出了。