Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML Height Fun

Posted on 2012-03-23
9
Medium Priority
?
282 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
Technology Partners: 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 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone 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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

670 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