Solved

HTML Height Fun

Posted on 2012-03-23
9
261 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
Help with mod_substitute 18 35
Make footer stick to bottom 6 27
Hide and Unhide Table 6 24
Two decimal 5 25
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

735 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