2

私のページでは、コンテンツ (ページ内の赤い色) をフッター (黄色) まで引き延ばしたいのですが、この 3 日間を修正する方法が見つかりません。私を助けてください..

index.html

<body>
<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="content">CONTENT</div>
    <div id="footer">FOOTER</div>
</div>
</body>

これは私のstyle.cssです

html,
body {
    margin:0;
    padding:0;
    height:100%;
    background-color: blue;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;
    background-color: red;
    width: 1000px;
    margin: 0 auto;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}
4

2 に答える 2

2

たとえば、 #content css に min-height を追加してみてください。

#content {
    padding:10px;
    padding-bottom:80px;
    background-color: red;
    width: 1000px;
    margin: 0 auto;
    min-height:600px;
}

ここを参照してください：http://jsfiddle.net/DAQ7W/

もう 1 つのトリックは、#wrapper を #content と同じ背景色にすることです。;)

于 2013-02-13T13:39:41.567 に答える
1

あなたが探している用語は「スティッキーフッター」だと思います。その場合、私が書いたこのスクリプトを使用します。

HTML

<div id="pagewrap">

    <div id="header">header</div>
    <div id="content">content</div>

</div>

<div id="footer">footer</div>


Javascript

$(function() {

    function positionFooter() {

        var windowHeight = $(window).height();
        var documentHeight = $('#pagewrap').height();

        if (windowHeight > ($('#content').height() + $('#header').height())) {
            var pagewrapHeight = windowHeight - $('#footer').height();
            $("#pagewrap").height(pagewrapHeight);
        }
    }

    positionFooter();
    $(window).resize(positionFooter)

});


CSS

body { background: red; }
#header { text-align: center; height:100px; background: green; }
#content { text-align: center; height: 300px; background: red; }

#footer {
   position: relative;
   height: 35px;
   line-height: 35px; /* Height footer */
   text-align: center;
   clear:both;
   background: yellow;
   color: #fff;
   width: 100%;
}
于 2013-02-13T13:59:39.743 に答える