Div is set to 100% height, but it doesn't fill screen

Question

I have made a div that I want to start at 20% from the top, and go to wherever the bottom of the page is. The issue is that the div won't "expand" when there is more content than what the site can display without scrolling. My explanation is bad, but just look at the jsfiddle, and you'll get it :)

JSFiddle: https://jsfiddle.net/rvv7an5h/

.mainContent {
    background-color: rgb(220, 220, 220);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 20%;
    margin: 0 auto;
    text-align: center;
    }

    <div id="mainContent" class="mainContent">
     <div id="mainContentText" class="mainContentText">
     <h1> guides </h1>
    <h2> Here are some guides ya fool.</h2>
    </div>
    <div id="commonGuides" style="commonGuides">
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>The guides were a lie.</h3>
    </div>
    </div>

Edit: My question is not the same as How to make a div 100% height of the browser window?. The question there was how to make a div's height change when a user resizes their window (at least from my understanding), while what I wanted to do was to make a div as high as the content within it, so that no content would be outside of the div.

set height to min-height: 100%.If you use height: 100% it means it will only cover 100% of the window. If you put min-height it will cover the part of the div that is outside the window. — Naomi, Jan 15 '18 at 12:42
Possible duplicate of [How to make a div 100% height of the browser window?](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window) and a multitude of same answers found by searching SO. — Rob, Jan 15 '18 at 12:43
Why is this getting so many dislikes/downvotes? What can I do to improve my questions in the future? — Kossi, Jan 15 '18 at 13:20

Jesse · Answer 1 · 2018-01-15T12:53:14.620

Option 1: min-height

You can simply use min-height if you want the div to be at least 100%, but expand with the content.

See the updated fiddle: https://jsfiddle.net/rvv7an5h/1/

Option 2: Position

Remove the position: absolute so that the element is placed in the normal flow of the document. This way the height is calculated differently.

Updated fiddle: https://jsfiddle.net/rvv7an5h/2/

Explanation: When you use height: 100%, what you get is an element that is exactly 100% of the parent element. Meaning if the content is smaller or above 100% the element's height remains 100%.

Now from the answer above, the minimum (smallest) height your element can have is 100%, therefore if the content of your element exceeds 100%, the height of your element increases along with it.

Please explain to him why he should do that. https://stackoverflow.com/help/how-to-answer — Rob, Jan 15 '18 at 12:40

score 0 · Answer 2 · edited Jan 15 '18 at 12:50

0

Change height:100% to height:auto.

With height:100% your container will get the height of the current viewport, not all the content. If you want to show the content full height by default: add min-height: 100vh to the container.

edited Jan 15 '18 at 12:50

Yannick Huber

607
2
16
35

answered Jan 15 '18 at 12:42

Alfalfa

36
5

score 0 · Answer 3 · answered Jan 15 '18 at 12:43

No need to use position: absolute. Just set margin-top:20% to the div mainContent.

.mainContent {
  background-color: rgb(220, 220, 220);
  width: 100%;
  position: relative;
  margin: 20% auto 0;
  text-align: center;
}

body {
  margin: 0;
}

<div id="mainContent" class="mainContent">
  <div id="mainContentText" class="mainContentText">
    <h1> guides </h1>
    <h2> Here are some guides ya fool.</h2>
  </div>
  <div id="commonGuides" style="commonGuides">
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>The guides were a lie.</h3>
  </div>
</div>

Div is set to 100% height, but it doesn't fill screen

3 Answers3