我想在页面的机器人上有一个页脚。 我已经遵循了很多不同的教程,但它不起作用。 当我缩放我的屏幕直到有一个滚动条时,页脚位于窗口的底部而不是页面的末尾。
这是我的css:
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{
position: relative;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
min-height: 100%;
padding-bottom: 40px;
margin: 0;
}
#footer{
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-left: 16%;
margin-right: 16%;
font-size: 11px;
margin-top: 20px;
margin-bottom: 15px;
width: 68%;
}
html结构:
<!DOCTYPE html>
<html lang="nl">
<body>
<nav>
....
</nav>
<div id="content">
....
</div>
<div id="footer">
....
</div>
</body>
</html>
图片:
the footer at the bottem of the window
有人可以帮助我吗?
提前谢谢你!
答案 0 :(得分:1)
必须有其他内容,因为您的代码可以正常使用该示例。你在使用iframe吗?请尝试添加一个代码段
此外,如果你有一个 float
定位的元素,你应该在#footer div之前添加<div style='clear:both
&gt;`,浮动元素可以做很多奇怪的事情如果你不清楚的话。
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{
position: relative;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
min-height: 100%;
padding-bottom: 40px;
margin: 0;
}
#footer{
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-left: 16%;
margin-right: 16%;
font-size: 11px;
margin-top: 20px;
margin-bottom: 15px;
width: 68%;
}
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer"> footer</div>
</body>
</html>
答案 1 :(得分:0)
这是一种将页脚粘贴在页面底部的绝佳方法,不使用高度:100%。
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
<body class="Site">
<header>header stuff!</header>
<main class="Site-content">Main Content stuff</main>
<footer>footer stuff!</footer>
</body>