[英]Keeping HTML footer at the bottom of the window if page is short
我的某些网页很短。 在这些页面中,页脚可能最终会出现在窗口的中间,而页脚下方则是空白(以白色显示)。 看起来很丑。 我希望页脚位于窗口的底部,而有限的内容主体会被拉伸。
但是,如果网页很长,并且您必须滚动查看页脚(或其全部),那么事情应该会正常进行。
用CSS执行此操作的正确方法是什么? 我需要Javascript / jQuery来实现吗?
我只关心IE9 +和其他浏览器的现代版本。 页脚的高度也可以在页面之间变化,因此我不想依赖高度。
看看这个网站 。 他有一个很好的教程,介绍如何使用CSS执行此操作。
我复制了他的css,以防万一Matthew的网站被删除。
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
编辑
由于页脚的高度因页面而异,因此您可以获取页脚的高度,然后使用javascript调整#body padding-bottom。 这是使用jquery的示例。
$(function(){
$('#body').css('padding-bottom', $('#footer').height()+'px');
});
给这一个尝试。
它是Github用来将页脚保留在页面底部的样式的副本。 这有点棘手,需要您知道页脚的高度(这可能不适用于您的用例)
<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>
<footer>
<p>footer-text</p>
<img src="http://placekitten.com/100/100" alt="footer image">
</footer>
// our page element
html {
height:100%;
}
body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}
.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}
footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}
这里重要的事情似乎是:
html
和body
) min-height
height: auto !important
和height:100%
希望有帮助!
的HTML
<body>
<div class="example">
<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>
</body>
的CSS
body {
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
考虑到所有页脚都位于<footer>
html标记内,因此使用jQuery可以轻松解决此问题。
JS:
$(document).ready(function(){
$('body').css('padding-bottom', $('footer').height()+'px');
});
CSS:
footer {
position:absolute;
bottom:0;
}
不,很容易为您设置身高的最小值。
像这样:min-height:500px; 那么最小高度是500px。
使用min-height属性,尽管并不完全可靠,因为某些旧版本可能不支持它。 如果您不介意,请添加一些JavaScript。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.