Solved

HTML Height Fun

Posted on 2012-03-23
9
252 Views
Last Modified: 2012-03-29
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?
0
Comment
Question by:jglazer63
9 Comments
 
LVL 1

Expert Comment

by:MetMc
ID: 37757939
Examine what HTML below?
0
 

Author Comment

by:jglazer63
ID: 37757945
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>
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 37758309
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
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37758347
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

0
 

Author Comment

by:jglazer63
ID: 37759161
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?
0
 
LVL 16

Expert Comment

by:s8web
ID: 37760484
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

0
 

Author Comment

by:jglazer63
ID: 37760549
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.
0
 

Accepted Solution

by:
jglazer63 earned 0 total points
ID: 37760553
I ended up solving this by eliminating the nested table.  I have 1 header cell (colspan=2) and 2 columns below that with the table set to 100%.  I am turning on and off the left column at will using CSS (display:none).  This seems to work on all browsers and does not use the scrollbar at all.  

A simple solution, yes, but I have to specify more specific CSS than I want to on a page by page basis (forgoing the stylesheet approach for this particular element).  But its good enough to  move on.

Thanks for all your help.
0
 

Author Closing Comment

by:jglazer63
ID: 37780831
After hours of trying everything provided here and elsewhere, this was the only solution that fit the bill.
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question