Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

HTML Height Fun

Posted on 2012-03-23
9
Medium Priority
?
291 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 84

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

886 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