在HTML中利用CSS设计多栏高度自适应页面

方法一：伪列布局法（利用背景图）

所谓伪列布局法，就是设计一个背景图像，利用背景图像来模拟栏目的背景。如，使用Photoshop设计一个长方形的背景图，长度与页面宽度保持一致，高度任意。
代码中要用到的背景图：


bg.gif（代码中背景图 800*77）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计多栏高度自适应页面_伪列布局法</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body { text-align: center; }
#model {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#header { background: #FF00FF; }
#main {
    position: relative;
    width: 100%;
    background: url(images/bg.gif) center repeat-y
}
#content {
    margin-left: 25%;
    margin-right: 20%;
}
#subplot {
    width: 20%;
    position: absolute;
    right: 0;
    top: 0;
}
#serve {
    width: 25%;
    position: absolute;
    left: 0;
    top: 0;
}
#footer { 
    background: #FF99FF; 
    }
</style>
<script type="text/javascript" language="javascript">
    /*解决#subplot #serve 因绝对定位脱离文档流，使#mian包含框的高度就为#content的高
     度，此脚本会使#mian的高度为三个子栏最高的一栏的高度
     即#serve的高度；*/
window.onload = function(){
    var main = document.getElementById("main");
    // 定义即将控制的外框div
    var left = document.getElementById("subplot").offsetHeight;
    // 获得内部三栏中ID = subplo的div高度
    var right = document.getElementById("serve").offsetHeight;
    // 获得内部三栏中ID = serve的div高度
    var middle = document.getElementById("content").offsetHeight;
    // 获得内部三栏中ID = content的div高度
    var height = 0;
    // 定义变量来储存最大值
    height = left - right > 0 ? left : right;
    // 数值比较
    height = middle - height > 0 ? middle : height;
    // 数值比较
    main.style.height = height + "px";
    // 设定外框div的高度为 得出的最大高度
}
</script>
</head>

<body>
<div id="model">
    <div id="header">
        <h1>网页标题</h1>
        <h2>网页副标题</h2>
    </div>
    <div id="main">
        <div id="content">
            <h3>主信息区域</h3>
            <p>正文内容</p>
            <p>正文内容</p>
        </div>
        <div id="subplot">
            <h3>次信息区域</h3>
            <p>正文内容</p>
        </div>
        <div id="serve">
            <dl>
                <dt>功能服务区域</dt>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
            </dl>
        </div>
    </div>
    <div id="footer">
         <p>版权信息区域</p>
    </div>
</div>
</body>
</html>

浏览器效果截图：
伪列布局.png

提示：在使用这种方法时，一定要确保页面宽度是固定的且与背景图的宽度一只，不能够设计为弹性页面（百分比宽度），或宽度值为auto；

方法二：补白padding边界margin重叠法

这种设计方法的思想是设计三列栏目的底部不带为无穷大，这样在有限的窗口内都能够显示栏目的背景色，因此也就不用担心栏目高度无法自适应。然后为了避免补白过大产生的空白区域，在设计底部边界为负无穷大，从而覆盖掉多出来的补白区域，最后再在中间行包含框中定义overflow:hidden;声明剪切到多出的区域即可。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计多栏高度自适应页面_补白边界重叠法</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body { text-align: center; }
#model {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#header { background: #FF00FF; }
#main {
    position: relative;
    width: 100%;
    border:1px solid black;
    overflow:hidden;/*在父元素添加 溢出隐藏 就可以隐藏超出的背景图了*/
}
#content { /*此包含框会随着内容的增加而增加*/
    margin-left: 25%;
    margin-right: 20%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    background:#fc0;
}
#subplot {/*此包含框虽然也会随着内容的增加而增加，但因为定义了绝对定位，脱离了文档流，所以高度的增加不会影响父元素的高度，
所以看不到效果。但父元素设 置 overflow：hidden；后可以对所有超出父元素的子元素进行隐藏（不管是否脱离文档流）*/
    width: 20%;
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid red;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    background:#0cc;
}
#serve {/*此包含框虽然也会随着内容的增加而增加，但因为定义了绝对定位，脱离了文档流，所以高度的增加不会影响父元素的高度，
所以看不到效果。但父元素设置 overflow：hidden；后可以对所有超出父元素的子元素进行隐藏（不管是否脱离文档流）*/
    width: 25%;
    position: absolute;
    left: 0;
    top: 0;
    border:1px solid green;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    background:#9cf;
}
#footer { 
    background: #FF99FF; 
    }
</style>
</head>

<body>
<div id="model">
    <div id="header">
        <h1>网页标题</h1>
        <h2>网页副标题</h2>
    </div>
    <div id="main">
        <div id="content">
            <h3>主信息区域</h3>
            <p>正文内容</p>
            <p>正文内容</p>
            <p>正文内容</p>
            <p>正文内容</p>
            <p>正文内容</p>
            <p>正文内容</p>
            <p>正文内容</p>
        </div>
        <div id="subplot">
            <h3>次信息区域</h3>
            <p>正文内容</p>
        </div>
        <div id="serve">
            <dl>
                <dt>功能服务区域</dt>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
            </dl>
        </div>
    </div>
    <div id="footer">
         <p>版权信息区域</p>
    </div>
</div>
</body>
</html>

浏览器效果截图：


边界补白重叠法.png

但是这种方法只能够根据中间栏目的高度来裁切，也就是说overflow:hidden;声明对于流动或浮动元素有效，对于脱离文档流的绝对定位元素来说无法进行裁切，从而导致如果绝对定位的栏目高度高出中间流动布局栏目的高度时，就会被裁切掉。
为了避免此类问题发生，不能使用定位法布局页面，应用简单的浮动发进行设计，改动的核心样式如下（方法三），这样就可以实现上述3列自适应高度的版式效果。

方法三(绝对定位改浮动)：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计多栏高度自适应页面_补白边界重叠法_绝对定位改浮动</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
body { text-align:center; }
#model {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}
#header { background:#FF00FF; }
#main {
    position:relative;
    width:100%;
    overflow:hidden
}
#content {
    float:left;
    width:55%;
    background:#FFCC00;
}
#subplot {
    width:20%;
    float:left;
    background:#00CCCC;
}
#serve {
    width:25%;
    float:right;
    background:#99CCFF;
}
#content, #subplot, #serve {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
#footer { background:#FF99FF; }
</style>
</head>
<body>
<div id="model">
    <div id="header">
        <h1>网页标题</h1>
        <h2>网页副标题</h2>
    </div>
    <div id="main">
        <div id="content">
            <h3>主信息区域</h3>
            <p>正文内容</p>
            <p>正文内容</p>
        </div>
        <div id="subplot">
            <h3>次信息区域</h3>
            <p>正文内容</p>
        </div>
        <div id="serve">
            <dl>
                <dt>功能服务区域</dt>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
                <dd>服务列表项</dd>
            </dl>
        </div>
    </div>
    <div id="footer">
        <p>版权信息区域</p>
    </div>
</div>
</body>
</html>

浏览器效果图：

绝对定位改浮动.png

声明：此文只代表个人见解，只供参考！联系QQ：1522025433

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,351评论 1赞 92
  • CSS中的float定位技术在iOS上的实现
    CSS中的float属性简介 几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素...
    欧阳大哥2013阅读 2,437评论 5赞 26
  • html&css兼容性和hack技术
    定义浏览器对于技术支持的标准不同造成兼容性的差异 兼容不同类型浏览器的基本方法 解决浏览器兼容问题的方法，这些方法...
    简不简单_都好阅读 490评论 0赞 1
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 1,731评论 0赞 11
  • 偏心
    国槐的庇护下撑着伞 面朝着北方三十里的方向 头顶的雨招摇而过 带着那朵云彩向着你的方向 你说这场雨有些偏心 窗口固...
    方夏阅读 176评论 3赞 9