Question

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

我希望将页面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>

Answer 1

尝试将height设为auto：

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

Html将div拉伸到底部

1 个答案: