asked on

HTML Height Fun

If you examine the HTML below, you'll see that I am trying to achieve a scroll-bar less full-screen design. The yellow area at the top will contain some sort of header junk, the grey area is a menu and the white area is content. It is important that the design fill the entire page without any scrollbars at all.

In firefox this is perfectly achieved.

In IE 9 (maybe 8 too) it will only display a small area in the center (vertically) for the content (blue outline). I've tried DIVS and only resorted to tables for simplicity. Nothing will let me do this right. If I specify a height of 100% on cell containing the COL1 and COL2 table, then I get a scroll bar on the right (again only in IE).

I am pretty good at CSS and I know this should be simple but sometimes the simplest things are the hardest to work out!!

Any suggestions?

MetMc

Examine what HTML below?

jglazer63

ASKER

bleh ... oops :-=)

<!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" style="height: 100%">
<head >
<title></title>
</head>
<body style="height: 100%;margin:0px">
<table style="width: 100%; height: 100%; border: 1px solid red">
<tr>
<td style="height: 180px; background-color: Yellow">
</td>
</tr>
<tr>
<td>
<table style="width: 100%; height: 100%; border: 1px solid blue">
<tr>
<td style="width:180px;background-color:Silver;">
Col1
</td>
<td>
Col2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Tony van Schaik

Try this i tested the code in FF, IE9 and Chrome:

<!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">
html, body, #wrapper, #inner {
	height:100%;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
}
#wrapper {
	margin: 0 auto;
	text-align: left;
	vertical-align: top;
	width: 100%;
	background:#999900;
}
#inner {
	margin: 0 auto;
	text-align: left;
	vertical-align: top;
	width: 100%;
}
.header {
	height:200px;
	background:#00CCFF;
}
#wrapper td, #inner td {
	vertical-align:top;
}
td.left {
	background:#3300FF;
	vertical-align:top;
	width:50%;
}
td.right {
	background:#ff0000;
	vertical-align:top;width:50%;
}
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0" id="wrapper" >
  <tr>
    <td colspan="2" class="header"></td>
  </tr>
  
  <tr>
    <td class="left"><table id="inner" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Inner table</td>
  </tr>
</table>
</td>
    <td class="right"></td>
  </tr>
</table>
</body>
</html>

Open in new window

Not a fan of tables and height 100% isn't really valid so this might cause cross-browser issues, don't know what you are trying to achieve.

But if you want a responsive layout you better look at something like this: http://www.getskeleton.com

Dave Baldwin

In the HTML Box Model, margins, padding, and borders are OUTSIDE the content box. But your width and height are for the content box. http://www.w3.org/TR/CSS2/box.html So if you specify 100% and add a border, you're going past 100% which is why you get scroll bars. Here's a version of your code with less than 100% heights.

<!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" style="height: 100%">
<head >
    <title></title>
</head>
<body style="height: 100%;margin:0px;">
    <table style="width: 100%; height: 99%; border: 1px solid red;margin:0px;">
        <tr>
            <td style="height: 19%; background-color: Yellow;margin:0px;">
            </td>
        </tr>
        <tr>
            <td style="width: 100%; height: 79%; border: 1px solid green;margin:0px;">
                <table style="width: 100%; height: 100%; border: 1px solid blue;">
                    <tr>
                        <td style="width:180px;background-color:Silver; height: 100%;">
                        Col1
                        </td>
                        <td>
                        Col2
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Open in new window

jglazer63

ASKER

therealteune, your solution is about the same as mine. The problem is that I need the element "inner" to be 100% tall. Setting that in the CSS does not seem to do it in IE.

Dave, your solution won't work because I need the header to be EXACTLY xxx pixels high, not a percentage.

More ideas?

s8web

I would probably go with the faux columns approach:

<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			body,html{margin:0;padding:0;}
			body{background:url('background.png') left;}
			#container{width:100%;}
			#header{height:180px;background:yellow;}
			#ldiv{width:180px;display:inline-block;}
			#rdiv{display:inline-block;}
		</style>
		<title>Test</title>
	</head>
	<body>
		<div id="container">
			<div id="header">
				#header
			</div>
			<div id="ldiv">
				#ldiv
			</div>
			<div id="rdiv">
				#rdiv
			</div>
		</div>
	</body>
</html>

Open in new window

jglazer63

ASKER

s8web, this won't work because I need both ldiv and rdiv to be 100% tall (filling the browser under the header). This is important for the design to function properly.

ASKER CERTIFIED SOLUTION

jglazer63

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jglazer63

ASKER

After hours of trying everything provided here and elsewhere, this was the only solution that fit the bill.