如何确保我的页脚在页面末尾而不是在中间显示一路？ [英] How do I make sure that my footer shows all the way at end of the page rather than in the middle?
问题描述
这是我的页脚css：
.footer {
background-color: #CACACA;
font-size: 20px;
height: 50px;
padding-top: 10px;
position: absolute;
text-align: center;
width: 100%;
}
在多个页面上，我拥有包含文本的容器。在一些页面上只有足够的内容，页脚出现在页面的末尾。但在某些情况下，没有足够的内容，因此页脚仍然显示在容器下，但是在页面的末尾和页面之间有一个空白。我如何解决这个问题，使其调整，无论容器的长度？
On multiple pages I have containers that content text. On some pages there is just enough content that the footer appears at the end of the page. But in some cases there isn't enough content so the footer still shows under the container but there is a gap between that and the end of the page. How can I fix this so it adjusts regardless of the length of the container?
推荐答案
像这样
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
看到我们在封装器中有页脚，页脚是绝对的然后我们只是添加页脚的高度到包装器底部填充和一些默认高度在包装器和身体和排序，看看jsfiddle这里 - http://jsfiddle.net/eTwJh/2/ ，这里是没有内容的 - http://jsfiddle.net/eTwJh/3/
see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
这篇关于如何确保我的页脚在页面末尾而不是在中间显示一路？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
