Html 将 div 拉伸到底部答案

【问题标题】：Html stretching a div to the bottomHtml 将 div 拉伸到底部
【发布时间】：2012-07-27 16:02:57
【问题描述】：

我有一个带有顶栏和底栏的 html 布局。

我希望将 page-div 拉伸到底部栏。

我不想为底栏使用固定位置。因为我希望底栏始终位于页面底部（而不是屏幕底部）。

有人对此有解决方案吗？谢谢提前！

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
    <style media="screen" type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        height:100%;
        margin-left: auto; margin-right: auto; width: 800px; 
        background: pink;
    }
    #container {
        min-height:100%;
        position:relative;
    }
    #header {
        padding:10px;
        background: yellow;     
    }
    #page {
        padding:10px;
        padding-bottom:20px;    /* Height of the footer */
        background: white;
    }
    #footer {
        position:absolute;
        bottom:0;
        width:100%;
        height:20px;            /* Height of the footer */
        background: green;
    }
    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    #container {
        height:100%;
    }
    </style>
    <![endif]-->
</head>
<body>
<div id="container">
    <div id="header">
        <!-- Header start -->
        <!-- Header end -->
    </div>
    <div id="page">
        <!-- page start -->
        <p>bla bla 1</p>
        <p>bla bla 2</p>
        <p>bla bla 3</p>
        <p>bla bla 4</p>
        <p>bla bla 5</p>
        <!-- page end -->
    </div>
    <div id="footer">
        <!-- Footer start -->
        <!-- Footer end -->
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： html css layout css-position

【解决方案1】：

尝试将height 设置为auto：

#page {
    padding:10px;
    padding-bottom:20px;
    height:auto;
    background: white;
}

【讨论】：

此解决方案不起作用。这也是我的第一个想法，但身高：100%；高度：自动；不拉伸
...