布局:上下两个div高度固定,中间自适应

Posted たLOME

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了布局:上下两个div高度固定,中间自适应相关的知识,希望对你有一定的参考价值。

需求:经典布局 —— 头尾固定高度中间高度自适应布局

头部固定高度,宽度100%自适应父容器;

底部固定高度,宽度100%自适应父容器;

中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中间部分出现流动条;

整个内容填满浏览器可视区域,并且不超出此区域!

 

方法一:position:absolute定位,不设高,并改变"包含块"的尺寸渲染

固定头尾,所以,至少头和尾要用到position定位。因为浏览器大小是可以调节的,而且不同尺寸,不同分辨率的浏览器可视区域的高度是不固定的,

这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题,整个布局也就解决了一多半

最重要的一段就是中间部分绝对定位,top为头的高度,bottom为尾的高度

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>头尾固定中间高度自适应布局</title>
    <style>
        html, body {
            height:100%;
            margin:0;
            padding:0
        }
        #dHead {
            height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:5;
            top:0;
        }
        #dBody {
            background:#FC0;
            width:100%;
            overflow:auto;
            position:absolute;
            z-index:10;
            top:100px;
            bottom:100px;
        }
        .mycontent {
            padding:20px;
        }
        #dFoot {
            height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:200;
            bottom:0;
        }
    </style>
</head>
<body>
    <div id="dHead">固定头部100px;</div>
    <div id="dBody">
        <div class="mycontent">
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
        </div>
    </div>
    <div id="dFoot">固定尾部100px</div>
</body>
</html>

效果如下:

经测试:IE7+、firefox、chrome、safari、opera均通过测试!

 

 

方法二:利用boxsizing改变盒子模型

实现原理是,先为html设定box-sizing然后,加上上下padding值。布局模块均采用position:relative定位。

然后,头部采用负向margin向上平移(因为有了html padding),如查采用负top的话需要为每个布局版加上负top;看实现代码:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gb2312">
    <title>头尾固定中间高度自适应布局</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        html {
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            padding:100px 0;
            overflow:hidden;
        }
        html, body {
            height:100%;
        }
        .top {
            position:relative;
            top:-100px;
            height:100px;
            background:#f60;
        }
        .side {
            top:-100px;
            position:relative;
            height:100%;
            background:#fc0;
            overflow:auto;
            width:200px;
            float:left;
            margin-right:0 !important;
            margin-right:-3px;
            overflow:auto;
        }
        .main {
            top:-100px;
            position:relative;
            overflow:auto;
            height:100%;
            background:#f30;
        }
        .bottom {
            top:-100px;
            position:relative;
            height:100px;
            background:#f60;
            clear:both;
        }
    </style>
</head>
<body>
<div class="top"> top </div>
<div class="side"> side <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
<div class="main"> main <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br 以上是关于布局:上下两个div高度固定,中间自适应的主要内容,如果未能解决你的问题,请参考以下文章

两个div并排,左边div固定宽度,右边宽度自适应”,至少列出4种。

左右两栏固定宽度,中间自适应布局的5种方案

css布局之上下两行布局(上面固定高度,下面自适应)

flex布局 一侧固定宽度 一侧自适应

HTML中间div高度自适应内容,如何定义footer位置

CSS布局 , 单列宽度固定,另一列自适应。