CODEWITHSUNDEEP
htmlcss
newbieforever
newbieforever

Reputation: 215

Html/CSS: Content goes underneath a fixed footer

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>

Upvotes: 6

Views: 6666

Answers (6)

imTurtle
imTurtle

Reputation: 31

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

Upvotes: 0

newbieforever
newbieforever

Reputation: 215

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>

Upvotes: 0

Torf
Torf

Reputation: 1244

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.

Upvotes: 1

mumair
mumair

Reputation: 2818

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
}

Upvotes: 3

Johannes
Johannes

Reputation: 67748

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

Upvotes: 0

Gabriel Pellegrino
Gabriel Pellegrino

Reputation: 1122

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

Upvotes: 0

Related Questions