CODEWITHSUNDEEP
htmlcssflexbox
Dragonseer
Dragonseer

Reputation: 2874

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. 

body {
  background-color: white;
}

.main {
  max-width: 80%;
  background-color: red;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  align-content: stretch;
  flex-direction: row;
}
<section class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at aliquam dolor. Pellentesque a nibh in magna blandit elementum. Sed sodales porttitor dolor vel bibendum. Ut viverra justo in elit scelerisque, nec accumsan arcu facilisis. Nam ultricies
    leo vitae felis sollicitudin lobortis. Cras nec nibh venenatis, bibendum neque at, suscipit lacus. Vestibulum interdum sodales cursus. Pellentesque feugiat eu velit venenatis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
    faucibus risus quis est pellentesque ultrices.
  </p>
</section>

<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;
}

Upvotes: 1

Views: 807

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157364

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

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

html,
body {
  background-color: white;
  height: 100%;
}

.main {
  max-width: 80%;
  background-color: red;
  margin: 0 auto;
  padding: 10px;
  height: 100%;
}
<section class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at aliquam dolor. Pellentesque a nibh in magna blandit elementum. Sed sodales porttitor dolor vel bibendum. Ut viverra justo in elit scelerisque, nec accumsan arcu facilisis. Nam ultricies
    leo vitae felis sollicitudin lobortis. Cras nec nibh venenatis, bibendum neque at, suscipit lacus. Vestibulum interdum sodales cursus. Pellentesque feugiat eu velit venenatis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
    faucibus risus quis est pellentesque ultrices.
  </p>
</section>

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.

Upvotes: 3

Tushar
Tushar

Reputation: 4418

box-sizing is a good option, its a CSS3 property.

I have one more option. 

body, html {
    min-height:100%;
    height: 100%;
    margin:0;
}
.innerBox {
    min-height:100%;
    width: 80%;
    background: red;
    margin: 0 auto;
}
<div class="innerBox">
    Testing
</div>

Upvotes: 2

LaMiy
LaMiy

Reputation: 103

What about using a new div for wrapping your content ? Like this http://jsfiddle.net/MNQjk/2/

.block
{
  max-width:80%;
  background-color: red;
  height: 1000px;
  margin: 0 auto;
}

Upvotes: 0

Related Questions