头尾固定高度中间高度自适应布局

Posted 今天想转行了吗

tags:

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

一，头尾固定中间高度自适应布局

 

布局要求：

 

1 头部固定高度，宽度100%自适应父容器；

 

2 底部固定高度，宽度100%自适应父容器；

 

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

 

4 整个内容填满浏览器可视区域，并且不超出此区域！

方法一：position:absolute定位，不设高，并改变“包含块”的尺寸渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            height:100%;
            margin:0;
            padding:0
        }
        #dHead {
            height:100px;
            line-height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:5;
            top:0;
            text-align:center;
        }
        #dFoot {
            height:100px;
            line-height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:200;
            bottom:0;
            text-align:center;
        }
        #dBody {
            background:#FC0;
            width:100%;
            overflow:auto;
            top:100px;
            position:absolute;
            z-index:10;
            bottom:100px;
        }
        .content{
            width:300px;
            height:900px;
            background-color: #00F7DE;
        }


    </style>
</head>
<body>
<div id="dHead"></div>
<div id="dBody">
    <div class="content"></div>
</div>
<div id="dFoot"></div>

</body>
</html>

 

以上是关于头尾固定高度中间高度自适应布局的主要内容，如果未能解决你的问题，请参考以下文章

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

上下高度固定中间自适应的布局方式

easyui 在布局中间部分加了一个tab，tab的高度不能自适应，只能设置固定值

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

页面布局方案-左右固定，中间自适应

高度固定，左右宽度300，中间自适应