Div not filling all the body when height=100%

HTML & CSS
1

Before creating this topic I’ve really searched a lot and seen many similar topics,but still couldn’t work this out.Sorry if it’s been already solved.
My code is simply like this one below. When the content isn’t long it works correctly, however when I make it a little longer, the div turns out to be not 100% at the height.

<html>
<head>
<title></title>
<style>
body, html{
margin: 0;
padding: 0;
height: 100%;}

div{width:300px;
	background-color: green;
    height: 100%;}
	
</style>
</head>
<body>

<div>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		wont work<br><br><br>wont work<br><br><br>wont work<br><br><br>
		
</div>


</body>
</html>
2

Hi there nilufertek316,

and a warm welcome to these forums. :winky:

Try it like this…

div {
    min-height: 100%;
    max-width: 18.75em;
    background-color: #008000;
 }

coothead

5 Likes
3

Clarifiying for educational purposes:

you needed to use min-height: 100%; instead of height:100%.

setting html, body to height:100% set both of the elements ( consider them your ROOT CONTAINERS to the height of your browser view port.

Because your content is ( and could be) bigger than the height of the viewport window, you need to set your div to AT LEAST that height, if not more ( to accommodate the actual content).

hope that clears things up a bit

5 Likes
4

On the contrary the div turns out to be exactly 100% height which is why your content flows out of the div when it exceeds 100% height.

@coothead has given you the correct solution above but for the future remember to avoid giving fixed heights to elements that hold fluid content like text as that will not work as you expect and is prone to break.

4 Likes
5

thanks a lot everybody ,I still can’t belive it was that simple:sweat_smile:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.