100% Height does not refresh on resize

HTML & CSS
1

Hello everyone,
I have really been scratching my head with this and have found little online about it. I have an issue where I need to have two nested div tags at 100% height. However, even when I have a single div on the page at 100% height, when I resize the browser past the content, then scroll down, I get this strange margin at the bottom, like the browser is not refreshing the height when resizing the page. I can replicate this problem in just about every browser I have tested. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
body {
	background-color:#CCC;
}
#outerframe {
	height:100%;
	width:55%;
	margin-left:auto;
	margin-right:auto;
	background-color:#777;
	text-align:center;
	min-width: 800px;
	margin-bottom: 0;
}
</style>
</head>

<body>
<div id="outerframe">
  <p><br />
    Text<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
Size the browser past this text then scroll down     <br />
    <br />
  </p>
</div>
</body>
</html>

Any help would be much appreciated.

2

Hi sdt76. Welcome to SitePoint. :slight_smile:

Unfortunately, you can only set height: 100% on the outermost div. There aren’t many ways to get height: 100% pages to work. Here is a bulletproof method that I recommend you try:

See if that helps! :slight_smile:

3

Hi Ralph,
Thanks for the response. I have actually seen that page before. As I sit here staring at my screen, I am coming to terms with the fact that this may not be possible. What I am really trying to do is have an outer most DIV at 100%. Then an innermost DIV also at 100% with some space above that DIV. This is where I am stumped.

Viewing this code in a browser will show you what I mean. Based on your comment though, I am getting the idea that I might be trying to do something which may not be possible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
body {
	background-color:#CCC;
}
#outerframe {
	height: 100%;
	width:55%;
	margin-left:auto;
	margin-right:auto;
	background-color:#777;
	text-align:center;
	min-width: 800px;
}
#innerframe {
	height:100%;
	width:746px;
	min-height: 100%;
	background-color:#999;
	margin-left:auto;
	margin-right:auto;
}
</style>
</head>

<body>
<div id="outerframe">
  <p><br />
    Outer Frame<br />
    <br />
    <br />
    <br />
  </p>
  <div id="innerframe">
    <p>Scrolling down reveals a strange overlap even though everything is at 100% height.</p>
    <p>&nbsp;</p>
  </div>
  <p><br />
    <br />
  </p>
</div>
</body>
</html>
4

Paul O’Brien often explains the problem with the notion of an inner div with height: 100%, such as here:

I did try your code, and to be honest it seemed to work fine for me, but the fact that you are having troubles in your browser shows that the method is not reliable enough.

Sounds to me that you could do what you want by essentially having a ‘sticky header’ instead of a ‘sticky footer’, so perhaps check out this page to see how that’s done:

There was a thread in the forums in the last month or so on this very topic, but I can’t find it at the moment.

5

Just read the first thread. Yup that pretty much sums it up. In CSS there seems to be a disconnect between what is logical, and what the designer wants to see in the end result. But I read some of the second link, and the way he describes it, sounds like it is what I am looking for thanks for the replies.:slight_smile: