gpt4 book ai didi

html - 页脚不会留在页面底部

转载 作者:太空宇宙 更新时间:2023-11-04 14:34:32 26 4
gpt4 key购买 nike

我遇到了一些麻烦,试图让我的页脚留在我的页面底部,而我能找到的唯一教程有一个固定的位置,这是我不希望的。我只希望页脚位于页面底部,因此如果版权行位于页面下方 1000 像素处,那么页脚将位于此处。现在它位于页面顶部,就在它不应该位于的标题下方。

我的代码(html):

<body>
<div id="footer">

<div class="CopyrightLine">
&copy; Copyright
</div>

</div>
</body>

我的代码(css):

    #footer{
width: 100%;
height: 200px;
background-color: #000000;
float: left;
bottom: 0;
}

编辑:

我现在将代码更改为如下所示。

    #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;
}

但它仍然无法正常工作,即使我在顶部添加了很多文字,试图让它移动。

最佳答案

您可以通过以下一些技巧在页脚上使用绝对位置。

http://jsfiddle.net/a5q2u4bv/1/

html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 150px;
}
footer {
background: silver;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 150px;
}
<body>
<main>main</main>
<footer>footer</footer>
</body>

关于html - 页脚不会留在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28920557/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com