How to make container occupy 100% of the height of the screen?

Question

How to make container occupy 100% of the height of the screen?

Navigation

#1 by (1 votes)

1

The fact is that I have this code

 ...
 <body>

   <div class="container">
    ...
   </div>

 </body>
 ...

Inside the container I have a login form that occupies more or less half the height of the screen and I with this code:

.container {
  background: gray;
  height: 100%;
}

I make the container take up the full height of the browser even if the elements do not occupy everything.

So far so good, but when I go to a registration page it is longer (it has more content, more elements) and occupies more than 100% of the height of the browser and when I scroll down the container (which is gray color) stays to a certain point and the "background: gray;" it stays to a certain point. In other words, the gray color occupies 100% of the height and when there is a need to scroll, from there to below there is no gray color. I hope to give to enterder.

html css bootstrap

asked by Luis Ortega 04.11.2018 в 04:24

source

1 answer

Sort PHP Array Program that convert binary to decimal

score 1 · Accepted Answer

Hello friend, that's because height 100% occupies 100% of the height when loading your web when you scroll that stays where the web is charged nothing else.

   <body> 
          <div class="container"> 
           ... 
          </div> 
     </body>

In the css you add min-height so that as you scroll the gray is Move, I hope I serve you.

      .container { 
         background: gray; 
         min-height: 100vh; 
        }