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>

这是我的风格.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 中添加最小高度，例如：

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

见这里：http: //jsfiddle.net/DAQ7W/

另一个技巧是使#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 回答