Menu
The html page below contains a footer (position: fixed) and a "Sheet" (position: absolute).
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.)
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
<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>
538
It is overlapping to your content because of its position. The only way to give them some space between the content and the footer is to remove that custom css and then add a bottom padding in the last section element. Right now, the bottom padding is 0 which is why it is close or overlapping to the footer.
To do this just remove margin top from footer and set margin top and bottom to auto margin: auto 0; on your main content (in my case article element) or margin: auto; to center it on both direction (vertically and horizontally) and it will make content align to center. Your CSS should look something like this.
The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.
Give margin-bottom to sheet which is equal or grater than footer fix height;
.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.
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
z-index: 999; // use suitable maximum to bring in front all
}
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;. Then your margin can be counted in.
See 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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
