Div height 100%

leemarquis · 04-08-2009, 04:02 PM

How can I get a div to have 100% height but also be longer than this if the content requires it?

I can get the div to extend the full height of the screen but if the content inside the div happens to be longer than the browser window, when you scroll the div ends where the bottom of the window was and the content overflows it. I dont want to add scroll bars to the div.

If I dont specify the height then the div is the correct length for the content, but I want to be able to have the div always fill the height of the screen - even if the content isnt long enough.

abduraooft · 04-08-2009, 04:08 PM

Check the styles applied on the body,html and #wrap at http://bonrouge.com/2c-hf-fixed.php

Code:

 html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background-color:#ffffff;
font-family:arial, serif;
}
#wrap {
background:url(bg200W3.gif) top left repeat-y;
min-height:100%;
width:780px;
margin:auto;
position:relative;
}
* html #wrap {height:100%}

Excavator · 04-08-2009, 04:11 PM

Hello leemarquis,
Here's and even simpler one - http://nopeople.com/CSS/full-height-layout/index.html View the source to see how it's done.

leemarquis · 04-08-2009, 05:17 PM

Thanks for the speedy replies. I seem to have it working in FF and IE7 but not in IE6. Heres the link:

http://www.stuartmarquis.co.uk/menu

In IE6 there are two problems.

Firstly the background image should be fixed but it scrolls with the page.

Secondly, the white column on the right doesnt extend to the bottom when you scroll.

Any ideas how to fix this for IE6?

Here's the css for it...

Code:

html, body{
	height: 100%;
	text-align: left;	
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000;	
	background: #435c01;
}
* {
	margin: 0;
	padding: 0;
}




h2{
margin:0;
}

#bimage{
position:fixed;
top:0;
left:0;
margin:0;
padding:0;
width:100%;
overflow:hidden;
}


* html #bimage { 
	position: absolute;
}


.main-page{
position:absolute; left:0px; top:0px; text-align:left;z-index:5;width:100%;
min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto 0px; /* the bottom margin is the negative value of the footer's height */


}




.stuart-menu{
position:fixed;
width:52%;
top:8px;
left:0px;
padding-left:1%;
z-index:10;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}


.content{
width:47%;
min-height:100%;
position:absolute;
top:0;
left:53%;

background-image:url('http://stuartmarquis.co.uk/menu/images/text-background.png');
}

* html .content {height:100%}

.content-border{
width:108.5%;
height:100%;
position:absolute;
top:0;
left:-111%;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}

leemarquis · 04-08-2009, 05:43 PM

Just realised - the reason from problem no.2 above is because of problem 1. So if I can fix it so that IE6 doesnt want to scroll to bottom of the image then the height of the div should be fine.

What do I need to do in order get the image to be fixed?

Excavator · 04-08-2009, 06:19 PM

position:fixed; in IE6 - http://nopeople.com/CSS/position%20fixed/

leemarquis · 04-09-2009, 01:09 PM

Thanks - Ive tried to adjust my css based on thsi example but I cant seem to get it to work. Can you see whats wrong with my code at :

Code:

<?xml version="1.0" encoding="utf-8"?><!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >

<head>
	  <base href="http://stuartmarquis.co.uk/menu/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>stuartmarquis.co.uk</title>

  <link href="/menu/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/menu/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/menu/templates/stuart-temp1/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <script type="text/javascript" src="/menu/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/menu/media/system/js/caption.js"></script>

	<meta http-equiv="Content-Type" content="text/html; _ISO" />
	<meta name="mssmarttagspreventparsing" content="true" />

	<meta http-equiv="imagetoolbar" content="no" />
	<link href="/menu/templates/stuart-temp1/css/narrow.css" rel="stylesheet" type="text/css" media="screen" />
	<link href="/menu/templates/stuart-temp1/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />	
	<link rel="alternate stylesheet" type="text/css" href="/menu/templates/stuart-temp1/css/narrow.css" title="narrow" media="screen" />
	<link rel="alternate stylesheet" type="text/css" href="/menu/templates/stuart-temp1/css/wide.css" title="wide" media="screen" />
	<script type="text/javascript" src="/menu/templates/stuart-temp1/js/styleswitch.js"></script>
	<!--[if lte IE 6]>
	<style type="text/css"> img { behavior: url('/menu/templates/stuart-temp1/css/iepngfix.htc'); }</style>
	<link rel="stylesheet" type="text/css" href="/menu/templates/stuart-temp1/css/ie_hacks.css" media="screen, projection" />
	<script type="text/javascript" src="/menu/templates/stuart-temp1/js/iehover.js"></script>
	<![endif]-->	
	<!--[if IE 7]>
		<link rel="stylesheet" type="text/css" href="/menu/templates/stuart-temp1/css/ie_7.css" media="screen, projection" />
	<![endif]-->
	


<!--[if IE]>
<style type="text/css">
.main-page,
.content {
zoom:1;
}
</style>
<![endif]-->


<!--[if lte IE 6]>
		<style type="text/css">
			html, body
				{
				height: 100%;
				overflow: auto;
				}
			#bimage {
				position: absolute;
			}

		</style>
		<![endif]-->


</head>

<body>
    



<img src="http://stuartmarquis.co.uk/menu/images/snake-blue.jpg" id="bimage" alt="snake" />



<div class="main-page">



<div class="stuart-menu">
<ul class="menutabnav" id="tabnav"><li id="current" class="active item1"><a href="http://stuartmarquis.co.uk/menu/"><span>Home</span></a></li><li class="item2"><a href="/menu/about"><span>About</span></a></li><li class="item3"><a href="/menu/test-2"><span>Test 2</span></a></li><li class="item4"><a href="/menu/welcome"><span>Welcome</span></a></li><li class="item5"><a href="/menu/contact"><span>Contact</span></a></li></ul>
</div>





<div class="content-fade"></div>
<div class="content">
<div class="content-border">
</div>



<div class="blog">

			<div class="leading">
			

<h2 class="contentheading">
	2Welcome</h2>







<p> 2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum porta sem. Proin nisl risus, volutpat nec, elementum quis, egestas sed, erat. Nunc egestas hendrerit lorem. Maecenas id neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam semper mi. Morbi aliquam, ligula sit amet gravida auctor, mauris odio tempor nisi, id commodo massa ante sit amet quam. </p><p>Fusce nisl purus, dapibus eu, pretium suscipit, posuere et, mi. Ut accumsan, orci sit amet ornare tincidunt, ligula nulla convallis risus, id vestibulum ipsum orci sit amet nibh. Suspendisse at ipsum sit amet nulla hendrerit pulvinar. Pellentesque nec dui. Nunc posuere tellus eget magna. Vivamus vel mauris sit amet dui pellentesque tempus. Nam quam.</p>

		</div>
		<span class="leading_separator">&nbsp;</span>
	
	
	
	</div>


</div>




</div>


    
</body>
</html>

The CSS is below:

Code:

html, body{

	text-align: left;	
	font: 0.9em Arial, Helvetica, sans-serif;
	color: #000;	
	background: #0065c6;
}
* {
	margin: 0;
	padding: 0;
}


p{
margin-top:10px;
margin-bottom:15px;
}

h2{
font-size: 1.7em;
margin:0;
}

#bimage{
position:fixed;
top:0;
left:0;
margin:0;
padding:0;
width:100%;
overflow:hidden;

}


.bimage2{

	width: 250px;
	height: 250px;
	position: fixed;
	top: 50px;
	right: 50px;
	background: #f00;
z-index:110;
}

* html #bimage { 
	position: absolute;
}


.main-page{
position:absolute; left:0px; top:0px; text-align:left;z-index:5;width:100%;
min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto 0px; /* the bottom margin is the negative value of the footer's height */


}




.stuart-menu{
position:fixed;
width:51.1%;
top:8px;
left:0px;
padding-left:1%;
padding-right:1%;
z-index:10;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
text-align:center;

}


.content{
width:47%;
min-height:100%;
position:absolute;
top:0;
left:53%;

background-image:url('http://stuartmarquis.co.uk/menu/images/text-background.png');
}

* html .content {height:100%}



.content-border{
width:109%;
height:100%;
position:absolute;
top:0;
left:-111%;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}

.content-fade{
width:10%;
min-width:68px;
min-height:100%;
position:absolute;
top:0;
left:43%;
background-image:url('http://stuartmarquis.co.uk/menu/images/white-fade.png');
}
* html .content-fade {height:100%}

.blog, #page{
padding:22px;
padding-top:12px;
padding-left:12px;
}



/* begin css tabs */

ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 0px; /* set margins as desired */
font: bold 14px arial, sans-serif; /* set font as desired */
border-bottom: 0px solid #fff; /* set border COLOR as desired */
list-style-type: none;
padding: 6px 0px 6px 0px; /* THIRD number must change with respect to padding-top (X) below */
background-image:url('http://stuartmarquis.co.uk/menu/images/red-background.png');

}

ul#tabnav li { /* do not change */
display: inline;
margin:5px;
}



ul#tabnav li a { /* settings for all tab links */
padding: 6px 7px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 0px solid #6c6; /* set border COLOR as desired; usually matches border color specified in #tabnav */
color: #fff; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
line-height:16px;
}

ul#tabnav a:hover { /* settings for hover effect */
color: #ffe84c;
background-image:url('http://stuartmarquis.co.uk/menu/images/red-background.png');

}


/* end css tabs */

drhowarddrfine · 04-09-2009, 09:39 PM

While using the xml declaration on your first line is proper, only modern browsers understand what to do with it while IE6 goes into quirks mode. You can safely lose that line.