0

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

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

我正在尝试将页脚放置在页面底部，但无法如您在上面的链接中看到的那样。我已经尝试了我在互联网上找到的所有内容，包括设置容器元素的位置：相对；和页脚的position:absolute;andbottom:0;但似乎没有任何效果，事实上，如果您将容器 div 添加到代码中并制作它position:relative;，并将以下 css 添加到 footer : position:absolute; bottom: 0;，页脚似乎在某处消失。很长一段时间以来我一直对这个问题感到震惊，到目前为止我发现的唯一解决方案是设置我的页眉和我的内容以及页脚的position:static;，这不符合目的并破坏整个布局并且看起来很丑陋。我想避免使用 javascript。请帮助，在此先感谢。

编辑：我需要的说明： 在此处输入图像描述

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

4

4 回答 4

2

用这个

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

html, body{height:100%}


div#footer {
        color: white;
        background: rgba(68, 68, 68, 0.8);
        width: 100%;
        position:absolute;
        bottom:0;
    }
于 2012-09-03T12:13:38.040 回答
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页脚，twitter bootstrap

于 2012-09-03T12:15:07.750 回答
1

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

于 2012-09-03T12:25:02.077 回答
0

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

<!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>
于 2015-04-14T05:35:34.563 回答