'div doesn't take the whole height / is not 100%

here is the live link: http://mrgsp.md:8080/a/Account/SignIn

the main div (green one) doesn't take 100% of the screen height

you will notice this only if you have a big screenalt text

and the code is basically

<body>
<div class="loginpage">
<div id="loginbox">stuff inside loginbox</div>
</div>
</body>

.loginpage {
background:none repeat scroll 0 0 green;
padding:200px;
}
htmlcss


Solution 1:[1]

Sorry for my English...

put the background style in body... is better.

body{
    background: green;
}

If you still want to put a height for the div, you must put 100% height for the div, for the body, and for HTML too.

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

Solution 2:[2]

You could give the body the green background color?

Solution 3:[3]

You can't simply set a div height to 100%, because it will interpret that as 100% of its container.

The simplest solution to your problem is to set the background color on the body element, but alternatively, you can use your method by setting the body tag to have a height of 100%. This will give your div something to fill fully. If the body or whatever container of the div doesn't have a height set, then the browser defaults the css property of the div to height: auto.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TKirishima
Solution 2 kilrizzy
Solution 3 Michael La Voie

Related Questions