1

トップバーとボトムバーを備えた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>
4

1 に答える 1

-1

に設定heightしてみてくださいauto：

#page {
    padding:10px;
    padding-bottom:20px;
    height:auto;
    background: white;
}
于 2012-07-29T23:29:53.200 に答える