Html/CSS：内容位于固定页脚下方
[英]Html/CSS: Content goes underneath a fixed footer
问题描述
The html page below contains a footer (position: fixed) and a "Sheet" (position: absolute).
下面的 html 页面包含一个页脚（位置：固定）和一个“工作表”（位置：绝对）。
My problem: How to prevent the bottom end of the Sheet to be hidden underneath the footer when I scroll down?我的问题：当我向下滚动时，如何防止工作表的底端隐藏在页脚下方？
All my attempts with padding and margin failed ... (Please only html/css solutions.)我所有的填充和边距尝试都失败了......（请只使用 html/css 解决方案。）
CSS CSS
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red; }
HTML HTML
<body>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
6 个解决方案
解决方案1
2 2017-01-13 12:14:40
Give margin-bottom to sheet which is equal or grater than footer fix height ;给页margin-bottom等于或大于页脚固定高度的工作表；
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
}
Update if you want to bring in front of all then add z-index property.更新如果你想把所有的放在前面，然后添加z-index属性。
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
z-index: 999; // use suitable maximum to bring in front all
}
解决方案2
1 2017-01-13 12:25:02
The problem as I see it is the absolute position of the sheet, as absolute positions do not affect the height of the surroundung Element (in your case the body).我看到的问题是工作表的绝对位置，因为绝对位置不会影响周围元素的高度（在你的情况下是身体）。 If possible try position: relative;如果可能，尝试position: relative; . . Then your margin can be counted in. See https://jsfiddle.net/y3mg5zvb/那么你的保证金就可以算进去了。见https://jsfiddle.net/y3mg5zvb/
If it has to be absolute for any reason, you need a surrounding div with relative or static positioning that sets the height of the body.如果出于任何原因必须是绝对的，则需要一个具有相对或静态定位的周围 div 来设置主体的高度。
解决方案3
0 2017-01-13 12:10:19
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
max-height: 500px;
overflow: scroll;
top: 45px;
}
</style>
</head>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
</html>
This helps you?这对你有帮助吗？
解决方案4
0 2017-01-13 12:16:26
Just don't use absolute position on .Sheet - there's no reason for it.只是不要在.Sheet上使用绝对位置 - 没有理由。 Replace top and left with margin-top and margin-left and use a margin-bottom at least as high as the footer.用margin-top和margin-left替换top和left ，并使用至少与页脚一样高的margin-bottom 。
.Sheet {
margin-top: 100px;
margin-left: 25px;
margin-bottom: 30px; /* whatever value */
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
}
解决方案5
0 2017-01-13 18:59:14
I think this is a perfect solution!!!我认为这是一个完美的解决方案！！！
Solution by Joey, adapted by Nik Set position absolute and margin Joey 的解决方案，由 Nik 改编设置绝对位置和边距
<!-- Solution by Joey, adapted by Nik -->
<!-- https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
text-align: right; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange; }
.Sheet {
position: absolute;
top: 200px;
left: 25px;
width: 50%;
background: red; }
.Sheet::after {
position: absolute;
content: "";
bottom: -80px;
height: 80px;
width: 1px; }
</style>
</head>
<body>
<div class="Background">
Background <br><br><br><br><br><br><br><br><br><br><br><br>Background</div>
<div class="Sheet">
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content</div>
<div class="Footer">
Footer</div>
</body>
</html>
解决方案6
0 2019-11-18 09:39:03
* { margin: 0; padding: 0; } main { z-index: 999; } footer { width: 100%; min-height: 40px; background-color: black; } footer p{ color: white; }
<body> <main> <p>david</p> </main> <footer> <p>logo</p> </footer> </body>
try playing around with z-index and some尝试使用 z-index 和一些
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.