Dragonseer Dragonseer - 4 years ago 121
CSS Question

Set Min-Height of Background Color to Fit Page

I have a simple webpage with the center content with a red background. I'd like that background color to reach all the way to the bottom of the page, regardless of whether there is that much content in it or not.

I've tried various combinations of methods but nothing seems to stretch it correctly. In the Fiddle, I am attempting to use a flexbox but it doesn't appear to be working.

Fiddle: http://jsfiddle.net/Dragonseer/MNQjk/

<section class="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</section>

body
{
background-color:white;
}

.main
{
max-width:80%;
background-color:red;
margin: 0 auto;
padding: 10px;

display:flex;
align-content:stretch;
flex-direction:row;
}

Answer Source

I've tried various combinations of methods but nothing seems to stretch it correctly

I assume that you don't want a flex ONLY solution, because you can actually achieve this without the flex, so if that's the point, than set the parent elements height to 100%

Demo

Also, you would see, am using the snippet below

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

will do nothing but count the borders, padding of the element inside instead of default box model which counts these outside the element, thus it won't result in vertical scroll as you were using padding and I used height: 100%; so as I explained, padding will be counted outside of the element, and will thus result in scroll.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download