Question

我正在设计的网页布局就像这个小提琴：http://jsfiddle.net/5sTub/

编辑：注意：我不是想要一个粘性页脚。我只是想把它放在页面的底部。在回答之前请查看小提琴

我正在尝试将页脚放在页面底部，但我无法在上面的链接中看到。我已经尝试了我在互联网上找到的所有东西，包括设置容器元素的位置：relative;并且页脚的position:absolute;和bottom:0;似乎没有任何效果，实际上，如果您将容器div添加到代码并生成其position:relative;，并将以下css添加到页脚： position:absolute; bottom: 0;，页脚似乎在某个地方消失了。我已经对这个问题感到震惊，因为安静很长一段时间，我到目前为止找到的唯一解决方案是设置我的标题和我的内容以及页脚position:static;，这样可以达到目的并破坏整个布局和看起来很安静丑陋。我想避免使用javascript。请帮助，提前谢谢。

编辑：我需要的插图： enter image description here

其中蓝色是页脚，深蓝色是标题，浅蓝色是实际内容，粉红色是粘性div。我不想让页脚粘，但我希望它像你在普通页面上找到的那样，唯一的问题是它不会停留在页面的底部（参见fiddle）

Answer 1

使用此

在你的css中添加这个css属性

html, body{height:100%}


div#footer {
        color: white;
        background: rgba(68, 68, 68, 0.8);
        width: 100%;
        position:absolute;
        bottom:0;
    }

Answer 2

您可以使用 Sticky Footer 方法。阅读此http://ryanfait.com/sticky-footer/

例如这样写：

<强> HTML

<div class="container"></div>

<div class="footer"></div>

<强> CSS

body,html{
 height:100%;
}
.container{
 min-height:100%;
}
.footer{
 height:40px;
 margin-top:-40px;
}

选中此项以获取更多Flushing footer to bottom of the page, twitter bootstrap

Answer 3

它会帮助http://jsfiddle.net/5sTub/1/

Answer 4

我不知道你是否解决了这个问题，但我遇到了类似的问题并解决了如下问题：

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" " http://w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css" >
div#mypage {
    top:0;
    background: purple;
    color: white;
}
div#pageheader {
    top:0;
    left:0;
    height: 20%;
    position:absolute;
    width:100%;
    background: green;
    color: white;
 }
div#pagecontent {
}
div#contentleft {
    display: inline-block;
    background: blue;
    position:absolute;
    border-radius: 2px;
    left:0%;
    right: 15%;
    width:15%;
    height: 92.5%;
    top: 5%;
    color: white;
}
div#contentcenter {
    display: inline-block;
    background: yellow;
    position:absolute;
    border-radius: 2px;
    left:15%;
    right: 30%;
    width:80%;
    height: 92.5%;
    top: 5%;
    color: black;
}
div#contentright {
    display: inline-block;
    background: red;
    position:absolute;
    border-radius: 2px;
    left:95%;
    right: 5%;
    width:5%;
    height: 92.5%;
    top: 5%;
    color: white;
}
div#pagefooter {
    color: white;
    background: rgba(68, 68, 68, 0.8);
    width: 100%;
    height: 2.5%;
    position:fixed;
    left:0;
    bottom:0;
}
</style>
<head>
<title>Multiple Div's</title>
</head>
<body bgcolor="#cccccc">
<div id="mypage">
    <div id="pageheader">HDR</div>
    <div id="pagecontent">PAGE CONTENT
        <div id="contentleft">LEFT</div>
        <div id="contentcenter">CENTER</div>
        <div id="contentright">RIGHT</div>
    </div>
    <div id="pagefooter">FOOTER</div>
</div>
</div>
</body>
</html>

将div定位在容器元素的底部

4 个答案: