All geek questions in one place

Html / CSS: content is under a fixed footer

The following html page contains the footer (position: fixed) and the "Sheet" (position: absolute).

My problem: how to prevent the bottom end of the sheet from being hidden under the footer when scrolling down?

All my attempts with filling and margin have 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>
+4
source share
5 answers

Give margin-bottomon a sheet that is equal to or greater than the height of the footer fixation ;

.Sheet {
  margin-bottom: 35px; // equal or greater than footer height
}

Update if you want to enter in front of you, add a property z-index.

.Sheet {
  margin-bottom: 35px; // equal or greater than footer height
  z-index: 999; // use suitable maximum to bring in front all
}
+1
source

, , surroundung ( ). , position: relative;. . . https://jsfiddle.net/y3mg5zvb/

, div , .

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

?

0

.Sheet - . top left margin-top margin-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; 
}
0

, !

, 

<!-- Solution by Joey, adapted by Nik -->
<!-- /questions/246505/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>
0

Source: https://habr.com/ru/post/1666714/

More articles:


All Articles