即使页面内容小于屏幕内容，如何使页脚始终停留在页面底部？ [英] How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?
问题描述
我尚未在页面上添加内容，因为我仍在处理页眉和页脚。我注意到我的页脚不是位于页面底部，而是位于页面中间，位于页眉正下方，而不是位于页面底部。
I haven't added content to my page yet, since I'm still working on the header and footer. I noticed that my footer, instead of being at the bottom of the page, like it would be if the page was taller, it's in the middle of the page, right below the header.
我知道CSS中应该发生这种情况，但是如何使其深入到底？我尝试 position：fixed; bottom：0px; ，但是它到达底部，当我添加更多内容时，它将重叠或位于内容下方。
I know this is what should happen in CSS, but how do I make it go to the bottom? I try position: fixed; bottom: 0px;, but it goes to the bottom, and when I add more content, it will either overlap or go under the content.
编辑：我需要将页脚调整为高度。换句话说，我不能使用 height：100px; 之类的东西。另外，如果内容大于页面大小，我也不希望页脚停留在屏幕底部。如果屏幕高度为720px，而页面为1200px，则页脚不应位于屏幕底部。应该在页面底部，看不见。
I need the footer to be adjustable height. In other words, I can't use height: 100px; or whatever. Also, I don't want the footer to stick to the bottom of the screen if the content is larger than the page size. If the screen height is 720px, and the page is 1200px, the footer shouldn't be at the bottom of the screen. It should be at the bottom of the page, out of view.
如何解决此问题？我想不使用JavaScript 。
How can I fix this problem? I'd like to without using JavaScript.
这是我当前的页面。我的页脚不是固定高度，因此我无法使用需要此高度的解决方案。
Here is my current page. My footer is not a fixed height, and I can't use solutions that require that.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
font-family: Lato;
margin: 0px;
padding: 0px;
width: 100%;
}
header
{
height: 80px;
padding-left: 20px;
padding-right: 5px;
padding-top: 15px;
}
header h1
{
display: inline;
}
header nav
{
float: right;
font-size: 18pt;
}
header nav a
{
color: #999;
line-height: 50px;
margin-right: 20px;
text-decoration: none;
}
header nav a:hover
{
color: #666;
}
header nav a.currentPage
{
color: #7a7acc;
}
header nav a.currentPage:hover
{
color: #7a7acc;
}
footer
{
background-color: #f2f2f2;
color: #666;
font-size: 12pt;
padding: 20px;
text-align: center;
}
footer div
{
max-width: 750px;
margin: 0px auto;
}
footer a
{
color: #666;
}
</style>
</head>
<body>
<header>
<h1>
<img src="logo.png" />
</h1>
<nav>
<a href="/" class="currentPage">Home</a>
<a href="/services">Services</a>
<a href="/news">News</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<footer>
<div>
<p>Footer text. Footer text. Footer text.</p>
</div>
</footer>
</body>
</html>
推荐答案
使用CSS表：
FIDDLE1 -内容不多
FIDDLE1 - little content
FIDDLE2 -内容很少+页脚较大
FIDDLE2 - little content + large footer
FIDDLE3 -大量内容
FIDDLE3 - lots of content
<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>
CSS
CSS
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
display:table;
table-layout:fixed;
margin:0 auto;
}
.row {
display:table-row;
background:orange
}
div.row {
height:100%;
background:pink
}
这篇关于即使页面内容小于屏幕内容，如何使页脚始终停留在页面底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
