100% height issue

Discussion in 'HTML & Website Design' started by sugar, Mar 27, 2008.

0
  1. #1
    I have created a layout like this- http://www.alistapart.com/d/negativemargins/ex4.htm
    using the same technique but as you can see the issue is that height does not fits the browser window.

    Please suggest a solution. It's urgent
     
    sugar, Mar 27, 2008 IP
  2. Trapped

    Trapped Well-Known Member

    Messages:
    1,832
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    130
    #2
    Well you were close ;) but you can try this method (note: you will have slight problem with footer width, but set it to 99% width will come as close as what you will want to do) http://www.alistapart.com/articles/footers
     
    Trapped, Mar 28, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Uhm, maybe because there are no heights, min-heights or other such properties listed in the link in question?

    Let's see... There's no reason to be putting the header outside the container - in fact that just makes you HAVE to play with a negative top margin. If we set BOTH html and body to 100% that unlocks setting min-height on the outermost container... we need to set height in just IE6/earlier, * html will take care of that... and the footer has to be a fixed height in a FIXED METRIC since firefux and other gecko based browsers bone-up height calculations with negative margins when dealing with %/em. Multiple H1's - oh yeah, that's always a good sign... as is id="header" - if it's a header why isn't it a header tag? Ooh, I see the traditional ALA ice skate uphill to make columns code is present too.

    Of course being that you are dealing with ALA methods, your problems and confusion are hardly shocking... A List Apart is much like Dynamic Drive - when you are first starting out you are awed by their techniques, but once you actually understand said techniques their methodology seem like utter rubbish and their code... well. Let's just say I don't entirely have kind words for them and leave it at that.

    Try this on for size:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Example 4: Negative Margins</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

<style type="text/css" media="screen">
* {
	margin:0;
	padding:0;
}

body, html {
	height:100%;
}

#container {
	min-height:100%;
	overflow:hidden; /* wrap floats */
	background:#F1F2EA;
}

* html #container { /* lte IE6 */
	/* 
		IE6/earlier has no min-height, but treats height as such - unfortunately
		setting height with the overflow chops content off... but height trips
		haslayout which wraps floats - the only reason we are setting that 
		overflow, so just set that back to visible.
	*/
	height:100%;
	overflow:visible;
}

h1 {
	padding:8px;
	background:#D7DABD;
}

#contentWrapper {
	float:left;
	width:100%;
}

#content {
	margin-right:200px;
	padding:8px 8px 40px; /* extra bottom padding makes room for footer */
}

#sideBar {
	float:left;
	width:184px;
	margin-left:-200px;
	padding:8px 8px 40px; /* extra bottom padding makes room for footer */
	background:#D0D4B0;
}

#footer {
	padding:8px;
	font:normal 14px/16px sans-serif;
	margin-top:-32px; /* padding + line-height */
	background:#D7DABD;
}

h1 {
	margin-top: 0;
}

.last {
	margin-bottom: 0;
}

</style>
</head><body>

<div id="container">

	<h1>header</h1>

	<div id="contentWrapper"><div id="content">
		<h2>content</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus
			varius eleifend tellus. Suspendisse potenti. Class aptent taciti 
			sociosqu ad litora torquent per conubia nostra, per inceptos 
			hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis
			quis, posuere eget, arcu.
		</p><p>
			Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, 
			adipiscing ac, erat. Integer nonummy mauris sit amet metus. In 
			adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
			libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
			metus.
		</p>
	<!-- #content, #contentWrapper --></div></div>
	
	<div id="sideBar">
		<h2>sidebar</h2>
		<ul>
			<li>link one</li>
			<li>link two</li>
		</ul>
	<!-- #sideBar --></div>

<!-- #container --></div>

<div id="footer">footer</div>

</body></html>
    Code (markup):
    Based on the 100% height model example from my page on the subject of columns here:
    http://battletech.hopto.org/html_tutorials/3coldiv/template.html

    Hope this helps.
     
    deathshadow, Mar 28, 2008 IP