Height Headaches

Question

OscarT 0 Newbie Poster

13 Years Ago

Can anyone explain to me why the green sub_container in the following code doesn't expand down to fill the red main_container?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Test</title>
		<style> 
			html, body {margin:0; padding:0; height:100%;}
			div#main_container {min-height:100%; background:red;}
			div#sub_container {height:100%; background:green;}
		</style>
	</head>
	<body>
		<div id="main_container">
			<div id="sub_container">
				Test.
			</div>
		</div>
	</body>
</html>

I've tested this on the latest versions of FireFox and Internet Explorer, and in both cases, the sub_container stays tight around its own content, rather than expanding to fill its parent.

Note: I realise that if I change the main_container's min-height style to a height style, it will appear to work, but that would throw up a whole other issue (if the contents of sub_container gets large enough to extend below the bottom of the browser window, the background won't extend with it).

web-design

3 Contributors
11 Replies
189 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by OscarT

All 11 Replies

Varnius 2 Newbie Poster

13 Years Ago

Change
div#main_container {min-height:100%; background:red;}
to
div#main_container {height:100%; background:red;}

Or adjust sub_container height using Javascript.

Varnius 2 Newbie Poster

13 Years Ago

I doubt there are any other solutions other than those two.

Arkinder 93 Posting Pro in Training

13 Years Ago

The entire purpose of using the percentage unit is for a dynamic value. The problem with percentage is the browser is normally left with the question "percentage of what?"

All the browser knows is that you want div#sub_container 's height to be 100%. It interprets it as 100% of div#main_container 's (it's parent element) height. div#main_container doesn't have a set height, so it's height is equal to the height of it's content. All you've told the browser is the min-height cannot be below 100% - in this case 100% is the height of the content. The height and min-height properties are not the same. height tells the browser the desired height of the element. min-height tells the browser the minimum height an element can be.

To fix this give div#main_container a min-height: 100%; and a height: 100%; You should now have this,

html, body {margin:0; padding:0; height:100%;}
    div#main_container {min-height:100%; height: 100%; background:red; }
    div#sub_container {height:100%; background:green;}

You are still left with an overflow problem, so let's keep going through the "height tree." div#sub_container 's height is 100% of div#main_container 's height. div#main_container 's height is now 100% of the body element's height, and the body element's height is 100% of the html element's height. So the html element's height is 100% of the browser's default height.

Basically what this is saying is that the height of div#subcontainer is only going to be the default height of the browser window (height = window without vertical scroll bar). You need to allow your element's height to exceed beyond 100% of the window's default height, so you allow one of your element's height to adjust with the content. In this case the html element.

body {margin:0; padding:0; height:100%;}
    div#main_container {min-height:100%; height: 100%; background:red; }
    div#sub_container {height:100%; background:green;}

Now we are left with height = 100% of x. x being the height of the content, which changes depending on how much content you have.

A working, validated example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css"> 
			body {margin:0; padding:0; height:100%;}
			div#main_container {min-height:100%; height: 100%; background:red; }
			div#sub_container {height:100%; background:green;}
		</style>
	</head>
	<body>
		<div id="main_container">
			<div id="sub_container">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
	</body>
</html>

I understand this is quite a bit to throw at someone, so if you have any questions or don't fully understand any part of it - feel free to ask.

Regards, Arkinder

Edited 13 Years Ago by Arkinder because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

OscarT 0 Newbie Poster · Answer 1 · 2010-12-03T18:13:22+00:00

Change
div#main_container {min-height:100%; background:red;}
to
div#main_container {height:100%; background:red;}
Or adjust sub_container height using Javascript.

As mentioned, changing from min-height to height, throws up another problem - it fixes the background to the size of the browser window. Try copying a large chunk of text into sub_container (big enough to more than fill the screen), then scroll down and you'll notice that the text overflows beyond the background. This doesn't happen with min-height.

Javascript isn't an option as I want this to work even on browsers where Javascript has been disabled.

OscarT 0 Newbie Poster · Answer 2 · 2010-12-04T03:47:36+00:00

The entire purpose of using the percentage unit is for a dynamic value. The problem with percentage is the browser is normally left with the question "percentage of what?"

All the browser knows is that you want div#sub_container 's height to be 100%. It interprets it as 100% of div#main_container 's (it's parent element) height. div#main_container doesn't have a set height, so it's height is equal to the height of it's content. All you've told the browser is the min-height cannot be below 100% - in this case 100% is the height of the content. The height and min-height properties are not the same. height tells the browser the desired height of the element. min-height tells the browser the minimum height an element can be.

To fix this give div#main_container a min-height: 100%; and a height: 100%; You should now have this,

html, body {margin:0; padding:0; height:100%;}
    div#main_container {min-height:100%; height: 100%; background:red; }
    div#sub_container {height:100%; background:green;}

You are still left with an overflow problem, so let's keep going through the "height tree." div#sub_container 's height is 100% of div#main_container 's height. div#main_container 's height is now 100% of the body element's height, and the body element's height is 100% of the html element's height. So the html element's height is 100% of the browser's default height.

Basically what this is saying is that the height of div#subcontainer is only going to be the default height of the browser window (height = window without vertical scroll bar). You need to allow your element's height to exceed beyond 100% of the window's default height, so you allow one of your element's height to adjust with the content. In this case the html element.

body {margin:0; padding:0; height:100%;}
    div#main_container {min-height:100%; height: 100%; background:red; }
    div#sub_container {height:100%; background:green;}

Now we are left with height = 100% of x. x being the height of the content, which changes depending on how much content you have.

A working, validated example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css"> 
			body {margin:0; padding:0; height:100%;}
			div#main_container {min-height:100%; height: 100%; background:red; }
			div#sub_container {height:100%; background:green;}
		</style>
	</head>
	<body>
		<div id="main_container">
			<div id="sub_container">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
	</body>
</html>

I understand this is quite a bit to throw at someone, so if you have any questions or don't fully understand any part of it - feel free to ask.

Regards, Arkinder

Thanks for the very detailed response. However, the height and min-heights in your solution don't seem to actually do anything. The main_container and sub_container are always the same size as sub_container's contents (browser height doesn't come in to it - if you strip out all the heights and min_heights, you get the same result).

What I want is for sub_container to be at least as big as the browser window's height, and bigger if its contents expand beyond. I also want main_container to be the same size as sub_container.

Arkinder 93 Posting Pro in Training · Answer 3 · 2010-12-04T04:04:18+00:00

You and I are clearly getting different resultes ^_^ (refer to the attached screenshot).

Have you tried copy and pasting my finished example? Is it having the same problem? If you're using different, or have added code, please post it. What browser are you testing in?

Regards, Arkinder

OscarT 0 Newbie Poster · Answer 4 · 2010-12-04T04:21:39+00:00

I've copied and pasted your exact code and tested it on the latest versions of Windows FireFox and Internet Explorer.

When the contents are bigger than the browser window, it does indeed work and I get the same result as shown in your screenshot. However, when the contents are smaller than the browser window, both main_container and sub_container are wrapped tight around the contents and there's white space below.

Arkinder 93 Posting Pro in Training · Answer 5 · 2010-12-04T04:31:40+00:00

Haha, I let myself be distracted by the second overflow problem and ignored the original one. Add overflow: auto; to div#sub_container Regards, Arkinder

OscarT 0 Newbie Poster · Answer 6 · 2010-12-04T04:41:55+00:00

Haha, I let myself be distracted by the second overflow problem and ignored the original one. Add overflow: auto; to div#sub_container

body {margin:0; padding:0; height:100%;}
div#main_container {min-height:100%; height: 100%; background:red;}
div#sub_container {height:100%; background:green; overflow:auto;}

Nope, the divs are still wrapped tight around the contents, with whitespace below.

Arkinder 93 Posting Pro in Training · Answer 7 · 2010-12-04T09:35:18+00:00

My apologies, I've been having a very forgetful day today. Add your html selector again.

html, body {margin:0; padding:0; height:100%;}
div#main_container {min-height:100%; height: 100%; background:red;}
div#sub_container {height:100%; background:green; overflow:auto;}

Regards, Arkinder

OscarT 0 Newbie Poster · Answer 8 · 2010-12-04T11:56:58+00:00

My apologies, I've been having a very forgetful day today. Add your html selector again.
html, body {margin:0; padding:0; height:100%;}
div#main_container {min-height:100%; height: 100%; background:red;}
div#sub_container {height:100%; background:green; overflow:auto;}
Regards, Arkinder

Bingo! Thanks, that works perfectly now.

Height Headaches

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers