CODEWITHSUNDEEP
css
tcoulson
tcoulson

Reputation: 624

content div always to take 100% screen height with css

I have the following webpage. enter image description here

I am trying to get the blue red and white gradient to fill the entire height of the screen. Currently I have both flags on either side of the content container, all of them are surrounded by a main container. 

.container{
  width: 100%;
  background: -webkit-linear-gradient( $blueToRed); 
  background: -o-linear-gradient($blueToRed);
  background: -moz-linear-gradient($blueToRed); 
  background: linear-gradient($blueToRed);
   margin-bottom: -99999px;
  padding-bottom: 99999px;
  overflow: auto;
}

is inside of firstContain

.firstContain{
  border-left: 4px solid white;
  border-right: 4px solid white;
  background: #FFF;
  max-width: 980px;
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: auto;
  z-index:1000;
}

I am trying to get contain to be 100% height, but I add that and it doesn't move. I thought the 99999 margin padding trick would work, and it did, but then I lost some css that made it work. Any help is welcome. Thanks in advance for the advice in what I am doing wrong.

Upvotes: 3

Views: 17979

Answers (3)

prtdomingo
prtdomingo

Reputation: 981

Try adding height: 100% in both your html, body, .container in your styles like this:

html, body, .container {
    height: 100%;
}

.container {
  border-left: 4px solid white;
  border-right: 4px solid white;
  background: #333;
  max-width: 980px;
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: auto;
  z-index:1000;
}
<html>
    <head>
    </head>
    <body>
        <header></header>
        <div class="container">
          <p>Website Content</p>
        </div>
        <footer></footer>
    </body>
</html>

Upvotes: 2

Felix A J
Felix A J

Reputation: 6480

Try vh unit.

.container{
    min-height:100vh;
}

Upvotes: 17

Abhishek Mugal
Abhishek Mugal

Reputation: 571

For now, maybe you can go with

min-height: 100%;

in your container css, since there are no elements in the page to cover the height. So, min-height should do the work for you!

Upvotes: 0

Related Questions