页脚不会停留在页面底部 [英] Footer won't stay in the bottom of the page
问题描述
我遇到了一些麻烦，试图让我的页脚停留在页面的底部，并且我能找到的唯一教程的位置是固定的，我不希望这样.我只希望页脚停留在页面底部，因此，如果版权行位于页面下方1000px处，则页脚将位于该位置.现在，它在页面顶部，不应该在标题的下面.
I'm am having some trouble, trying to get my footer to stay at the bottom of my page and the only tutorials I can find has a fixed position, which I dont want it to. I just want the footer to stay at the bottom of the page, so if the copyright line is at 1000px down on the page, that is where the footer will be. Right now it is at the top of the page, right under the header which it isn't supposed to.
我的代码(html):
My code (html):
<body>
<div id="footer">
<div class="CopyrightLine">
© Copyright
</div>
</div>
</body>
我的代码(css):
#footer{
width: 100%;
height: 200px;
background-color: #000000;
float: left;
bottom: 0;
}
我现在将代码更改为如下形式.
I have now changed the code to look like this.
#footer{
width: 100%;
height: 200px;
background-color: #000000;
bottom: 0;
position: absolute;
}
.CopyrightLine{
position: relative;
left: 50%;
margin-left: -70px; /*half the image width*/
color: #ffffff;
}
但是，即使我在上面写了很多文字来尝试使其移动，它仍然无法正常工作.
But it still wont work, even though I make alot of text on top, to try and make it move.
推荐答案
没关系，我已自行修复，如果有人遇到相同的问题，我会将代码留在这里.
Never mind, I fixed it my self, I will leave the code here if anyone has the same problem.
html部分:
<body>
<div id="header">
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
css部分:
body {
padding:0;
height:100%;
}
body > #container {
height: auto;
min-height: 100%;
}
html {
height:100%;
}
#footer{
width: 100%;
height: 200px;
background-color: #000000;
z-index: 10;
margin-top: 1000px;
position: relative;
clear: both;
}
#content{
padding-bottom: 200px;
}
#container{
height:100%;
}
#header {
width: 100%;
height: 200px;
background-color: #000000;
float: left;
position: relative;
}
这篇关于页脚不会停留在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
