Question

在我的页面中，我希望内容（页面中的红色）延伸到页脚（黄色）...我找不到任何方法来修复过去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;
}

Answer 1

尝试在#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/

另一个技巧是使#wrapper与#content的背景颜色相同。 ;）

Answer 2

我认为你要搜索的术语是“粘性页脚”。在那种情况下使用我写的脚本：

<强> 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%; }

html / css内容不会延伸

2 个答案: