Content wrap is not covering entire area of div

Question

I have the following content wraps setup..

<div class="page_background">
        <div class="page">
             <p>gnjfikgnfik</p>
        </div>
</div>

.page_background {


width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
}
.page {
    background-color: #FFFFFF;
    width: 85%;
    min-height: 100%;
    bottom: 0;
}

For some reason my .page div doesn't cover the entire page. I have both closing divs in the correct spot. I thought min-height: 100%; ensured that it would over the entire height of the page? I have also tried bottom: 0; and still nothing. How can I correct this?

Answer 1

min-height needs the enclosing box's height to be specified explicitly.

min-height documentation from MDN :

Percentages: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.

Solution: use position: absolute to position your page element and then use height: 100% to make it span the complete page.

.page_background {
  width: 100%;
  position: absolute;
  height: 100%;
  ....
}
.page {
  position:absolute;
  width: 85%;
  height: 100%;
  ...
}

See Fiddle

Answer 2

add "position: absolute" inside page_background

.page_background {
    position:absolute;
    width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
}

Answer 3

Height in percentage requires that the height of the element's parent will be declared explicitly - for example parent height: 500px or height: 50%. Because you want it to be 100% of the screen view, you have to set all the parents from your element to html (including), so set both html and body to height 100%:

html, body {
height: 100%;
}

If you're targeting new browsers, you can use height: 100vh on the element. 1vh is 1% of viewport. In this this case you don't have to set the parents as 100vh is in relation to the viewport, and not the parent.