Page height does not contain content

Question

I have a linear-gradient background image, and it ends before the content does, height-wise.

I have tried quite a few things to fix this without luck, such as min-height: 100% and various positioning of the html and about-body divs. How do I make the html height fit all the content ?

html {
    width: 100%;
    min-height: 100%;
 overflow-x: hidden;
 overflow-y: scroll hidden;
 background-image: linear-gradient(#d580ff, #ffcc99);
}


/* Nav bar */

#pageNavBar {
 position: relative;
 margin: 0 0 0 0;
 width: 100%;
}

#header-text {
 position: absolute;
 width: 100%;
 top: 28vw;
 text-align: center;
 font-family: Gabriola, Arial, sans serif;
 font-size: 10vw;
 color: white;
 transition: all 0.3s ease-in-out;
}

#header-text:hover {
 color: rgba(255,255,255,0.8);
 text-shadow: 0 0 10px #FFFFFF;
}

#nav-links {
 position: absolute;
 width: 90%;
 height: 3.5vw;
 left: 5%;
 top: 2vw;
 font-family: Gabriola, Arial, sans serif;
 font-size: 2vw;
 color: black;
 text-align: center;
 font-weight: bold;
}

.nav-link {
 text-decoration: none;
 font-family: Gabriola, Arial, sans serif;
 font-size: 2vw;
 color: black;
 margin: 0 5% 0 5%;
 transition: all 0.3s ease-in-out;
}

.nav-link:hover {
 color: white;
 text-shadow: 0 0 10px white;
}


/* About */

#about-body {
 clear: both;
 position: relative;
 top: 8vw;
 width: 70%;
 margin: 0 15% 0 15%;
 border: 0.3vw solid rgba(255,255,255,0.6);
 border-radius: 5px;
 -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
}

#about-body-header {
 position: relative;
 width: 100%;
 top: 1.5vw;
 text-align: center;
 font-family: Gabriola, Arial, sans serif;
 font-size: 5vw;
 color: white;
 transition: all 0.3s ease-in-out;
}

#about-body-header:hover {
 text-shadow: 0 0 10px white;
}

#aboutImg {
 position: relative;
 width: 80%;
 margin: 3% 10% 5% 10%;
 border: 0.15vw solid rgba(255,255,255,0.6);
 box-shadow: 0vw 0.5vw 0.75vw gray;
}

#aboutTxt {
 position: relative;
 font-family: Tahoma;
 font-size: 1.25vw;
 margin: 0 10% 5% 10%;
}

<body>
 
  <!-- Navigation -->
  
    <div id="nav-links">

      <a href="/home" class="nav-link">
        Home
      </a>

      <a href="/about" class="nav-link">
        About
      </a>

      <a href="/projects" class="nav-link">
        Projects
      </a>

      <a href="/gallery" class="nav-link">
        Gallery
      </a>

      <a href="/social" class="nav-link">
        Social
      </a>

      <a href="/contact" class="nav-link">
        Contact
      </a>

    </div>

  <!-- Main page body below nav bars -->
  
  <div id="about-body">
   <div id="about-body-header">About Me</div>
   <img src="/images/image.png" id="aboutImg" />
   <p id="aboutTxt">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>  
  </div>
  
</body>

Possible duplicate of [Make body have 100% of the browser height](https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) — Domino, May 19 '19 at 21:17
@JacqueGoupil Doesn't seem like it, I've tried those solutions. Try it yourself in the code snippet. — Randall Arms, May 19 '19 at 21:24

XCS · Accepted Answer · 2019-05-19T21:27:38.827

You are doing a lot of strange stuff in your code (old clear fix, using top for relative positioned elements, use vw for top alignment instead of vh, etc.)

Replacing #about-body top property with margin-top fixes it.

It looks like when using top the wrapping element height does not change (it overflows the container instead), as per the spec: https://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

I do not recommend using top for relative positioned elements as it leads to confusing behaviour.

html {
    width: 100%;
    min-height: 100%;
 overflow-x: hidden;
 overflow-y: scroll hidden;
 background-image: linear-gradient(#d580ff, #ffcc99);
}


/* Nav bar */

#pageNavBar {
 position: relative;
 margin: 0 0 0 0;
 width: 100%;
}

#header-text {
 position: absolute;
 width: 100%;
 top: 28vw;
 text-align: center;
 font-family: Gabriola, Arial, sans serif;
 font-size: 10vw;
 color: white;
 transition: all 0.3s ease-in-out;
}

#header-text:hover {
 color: rgba(255,255,255,0.8);
 text-shadow: 0 0 10px #FFFFFF;
}

#nav-links {
 position: absolute;
 width: 90%;
 height: 3.5vw;
 left: 5%;
 top: 2vw;
 font-family: Gabriola, Arial, sans serif;
 font-size: 2vw;
 color: black;
 text-align: center;
 font-weight: bold;
}

.nav-link {
 text-decoration: none;
 font-family: Gabriola, Arial, sans serif;
 font-size: 2vw;
 color: black;
 margin: 0 5% 0 5%;
 transition: all 0.3s ease-in-out;
}

.nav-link:hover {
 color: white;
 text-shadow: 0 0 10px white;
}


/* About */

#about-body {
 clear: both;
 position: relative;
  /* <--- THIS WAS CHANGED (top removed) */
 width: 70%;
 margin: 8vw 15% 0 15%;  /* <--- THIS WAS CHANGED */
 border: 0.3vw solid rgba(255,255,255,0.6);
 border-radius: 5px;
 -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
}

#about-body-header {
 position: relative;
 width: 100%;
 top: 1.5vw;
 text-align: center;
 font-family: Gabriola, Arial, sans serif;
 font-size: 5vw;
 color: white;
 transition: all 0.3s ease-in-out;
}

#about-body-header:hover {
 text-shadow: 0 0 10px white;
}

#aboutImg {
 position: relative;
 width: 80%;
 margin: 3% 10% 5% 10%;
 border: 0.15vw solid rgba(255,255,255,0.6);
 box-shadow: 0vw 0.5vw 0.75vw gray;
}

#aboutTxt {
 position: relative;
 font-family: Tahoma;
 font-size: 1.25vw;
 margin: 0 10% 5% 10%;
}

<body>
 
  <!-- Navigation -->
  
    <div id="nav-links">

      <a href="/home" class="nav-link">
        Home
      </a>

      <a href="/about" class="nav-link">
        About
      </a>

      <a href="/projects" class="nav-link">
        Projects
      </a>

      <a href="/gallery" class="nav-link">
        Gallery
      </a>

      <a href="/social" class="nav-link">
        Social
      </a>

      <a href="/contact" class="nav-link">
        Contact
      </a>

    </div>

  <!-- Main page body below nav bars -->
  
  <div id="about-body">
   <div id="about-body-header">About Me</div>
   <img src="/images/image.png" id="aboutImg" />
   <p id="aboutTxt">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>  
  </div>
  
</body>

This helped me find the solution to my issue. The 'strange stuff' like `clear: both` and using `top` on `position: relative` divs was added from previous answers to similar questions, which clearly did not work in this case. The underlying issue was with the extra space taken up by the nav bar, which I was loading in from HTML with jQuery as a relative div (in the code snippet, I pasted the nav bar HTML straight into the page HTML for simplicity). Thanks! — Randall Arms, May 19 '19 at 21:39

Page height does not contain content

1 Answers1