相关疑难解决方法(0)
如何让页脚停留在网页的底部？
我有一个简单的2列布局,页脚可以清除标记中的左右div.我的问题是我无法在所有浏览器中让页脚停留在页面底部.如果内容向下推动页脚,它就可以工作,但情况并非总是如此.
更新:
它在Firefox中无法正常工作.当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时,我在页脚下方看到一条背景颜色条.不幸的是,这是页面的默认状态.
280
推荐指数
推荐指数
7
解决办法
解决办法
15万
查看次数
查看次数
使页脚正确粘贴到页面底部
我试图让我的页脚(只有一个带有一行文本的div)位于屏幕的底部,如果内容不是一直到底部,或者是在内容的底部,如果内容需要滚动条.如果内容不需要滚动条,则它可以很好地工作,但是当内容太长时,页脚仍然位于同一位置,位于内容的顶部.
我的基本div结构是:
<div id="container">
<div id="body"></div>
<div id="footer"></div>
</div>
我相应的CSS(有点剥离):
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;
}
#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;
}
203
推荐指数
推荐指数
4
解决办法
解决办法
45万
查看次数
查看次数
位于页面底部的页脚有固定页眉
我想将页脚放在页面底部,它还有一个固定的标题...
不是
position: fixed- 我不希望它留在屏幕上,它应该只是在页面的末尾,并在滚动时表现正常.不在可见屏幕的底部 - 在页面的底部,即; 毕竟其他内容.
这是一个更好地解释的图表:
这是代码:
- 我准备了一个演示:JSFiddle
- 或者见下文
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
body{
/* Just to enable scrolling in JSFiddle */
height: 1000px;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
z-index: 1;
}
#content{
width: 100%;
position: absolute;
top: 100px; /*Height of header*/
z-index: 0;
}
#footer{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
}
/*For demo only*/
#header, #footer{
border: …21
推荐指数
推荐指数
1
解决办法
解决办法
7万
查看次数
查看次数
固定页脚的CSS
我有一个非常基本的HTML页面.代码如下所示:
<body>
<header style="min-height: 255px;">
</header>
<article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
Body text goes here.
</article>
<footer style="position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
Copyright information
</footer>
</body>
通常,我的正文是相当大的.文本足够大,需要滚动条.看起来页脚位于文本顶部的底部.然后,当我向下滚动时,页脚不会保持固定.我究竟做错了什么？
谢谢
11
推荐指数
推荐指数
2
解决办法
解决办法
5万
查看次数
查看次数
将页脚设置为页面底部而不使用固定位置。
这让我发疯，我无法弄清楚为什么我的页脚出现在不同的高度，即使它是在 _Layout 视图中定义的。我有以下CSS：
.footer {
position: absolute;
bottom: 0;
background-color: #ffd800;
width: 100%;
text-align: center;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
HTML:(_布局)
<div class="container body-content">
@RenderBody()
<div class="footer"><p>Quote</p> </div>
</div>
我怎样才能让div停留在页面的最底部。我希望它位于所有内容下方。不覆盖任何内容，因此如果我添加另一个 div，脚将始终是页脚。我的问题示例：
我想要的是：
请帮助我在多个页面上保持一致。我在 stackoverflow 上查看了很多问题，但没有解决问题。
3
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数