Html/CSS: Content goes underneath a fixed footer

Question

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>

Yes: When I scroll down to the bottom of the page, the bottom of the Sheet should not end underneath the footer; there should be a padding/margin below the Sheet so that the bottom of the Sheet ends outside the footer. — newbieforever, Jan 13 '17 at 11:57
I think that a max-heigth will not answer properly. Have you tried add a scrollbar? — Gabriel Pellegrino, Jan 13 '17 at 12:02

mumair · Answer 1 · 2017-01-13T12:23:50.723

3

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
}

edited Jan 13 '17 at 12:23

answered Jan 13 '17 at 12:14

mumair

2,768
30
39

1

As I said: This fails. – newbieforever Jan 13 '17 at 12:18
@newbieforever have you tried `z-index: 999;` to Sheet to bring it in front – mumair Jan 13 '17 at 12:21
@newbieforever why fail? i tried this and working for me, explain? – Leo the lion Jan 13 '17 at 12:26
mumair: The bottom of the Sheet should not end "in the front" of the footer! – newbieforever Jan 13 '17 at 12:27
@newbieforever Explanation: z-index bring sheet all above to other elements just like layers. margin-bottom to push up sheet to make visible footer. Hope this solve your issue. – mumair Jan 13 '17 at 12:39

score 1 · Answer 2 · answered Jan 13 '17 at 12:25

1

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.

answered Jan 13 '17 at 12:25

Torf

1,154
11
29

You just put margin at end `140px;` position `absolute` ->` relative` not difference in given fiddle – mumair Jan 13 '17 at 12:33
Of course it is. If you change the sheets position to `absolute` you cannot scroll down. With `relative` you can scroll to the bottom. – Torf Jan 13 '17 at 12:46
Torf: Thank you! I know, Sheet absolute is the point. But (also to all other kind answers here): I think, my sheet **must** be absolute because of all other elements on my page. -- What do you mean with "a surrounding div"? – newbieforever Jan 13 '17 at 13:00
I updated the Fiddle to show what I meant: [have a llook](https://jsfiddle.net/y3mg5zvb/5/). Of course you have to take care that the height of the sheet never exceeds the height of the surrounding box. But I would strongly suggest, that you try to avoid `position: absolute;`. In most cases you have in the end less headache when using, relative positioning and things like `float: righ/left`. – Torf Jan 13 '17 at 13:16
Torf, I extremely appreciate your suggestions!!! I certainly would like to avoid absolute positions, but in my page layout I have a series of such Sheets (partly overlapping each other: each next Sheet on the top of the previous and moved a certain distance to right and down), and I think that this can be done only by absolute positions. -- Your idea with the surrounding box would work, but the content of the Sheet(s) is variable, so the height is variable too ... – newbieforever Jan 13 '17 at 16:03
Torf: -- I found out: A border for the Sheet like "border-width: 2px 2px 100px 2px" (same color as Background) would do exactly what I need (a "margin" of 100 px on the bottom of the Sheet)! Unfortunately I have to use another border style due to the desired layout ... -- Why this border trick is working, but similar tricks with padding or margin don't work??? Is there really no other way to add such a "bottom margin" which is seen by the page? – newbieforever Jan 13 '17 at 16:11
You can use `position: relative`and overlap the divs, that's no big deal. [Here is a fast and dirty example](https://jsfiddle.net/3r1Lyno0/). Absolute positioning has advantages, But be careful not to use it like you would position Layers in Photoshop. As soon as it comes to responsiveness it does not work very good. – Torf Jan 13 '17 at 18:21
Thank you, Torf, you are a schatz! This could be the best alternative for my project! -- However, in the meantime I found a solution for the problem discussed here: see my answer referring the solution by Joey and Nik! -- I will check now what is simplier for me ... – newbieforever Jan 13 '17 at 19:04

score 0 · Answer 3 · answered Jan 13 '17 at 12:10

<!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?

Gabriel: Unfortunately no. The height of the Sheet should not be limited. — newbieforever, Jan 13 '17 at 12:14

score 0 · Answer 4 · answered Jan 13 '17 at 12:16

0

Just don't use absolute position on .Sheet - there's no reason for it. Replace top and left with margin-top and margin-left and use a margin-bottom at least as high as the footer.

.Sheet {
  margin-top: 100px;
  margin-left: 25px;
  margin-bottom: 30px; /* whatever value */
  border-style: solid;
  border-width: 2px;
  padding: 20px; 
  background: red; 
}

answered Jan 13 '17 at 12:16

Johannes

64,305
18
73
130

Johannes: In my case the position must be absolute (if I correctly understand CSS) because there are other elements in "Background" and "Sheet" must be overlayed. – newbieforever Jan 13 '17 at 12:21
well, in this case some more information about that `.Background` would be necessary. Right now, your CSS for `.Background` doesn't really make sense, since without a `position` parameter, `top` and especially `right: 0px` have no impact at all. – Johannes Jan 13 '17 at 12:25

score 0 · Answer 5 · edited May 23 '17 at 12:33

I think this is a perfect solution!!!

Solution by Joey, adapted by Nik Set position absolute and margin

<!-- 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>

score 0 · Answer 6 · answered Nov 18 '19 at 09:39

* {
  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

Html/CSS: Content goes underneath a fixed footer

6 Answers6