CSS - How To Make The Page Height 100%

i have 2 divs

one is a navigation bar, the other is the pages main contents.

the contents and navigation links changes from page to page so i need a method so if the content is long, the navigation will stretch down long too to be the same height of the content, and the same thing vice versa.

how do i go about doing this?

I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height?

Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box?

jarsandmixes.com/liquid.php





body {
background-color: #FFF7EF;
}

div {
text-align:center;
}

div#wrapper {
background-color: transparent;
border:0px solid black;
margin:0px auto;
text-align:left;
position:relative;
width:100%;
height:100%;
min-height:100%;
}

div#border {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:10px;
}

div#page {
background-color: #DEC6B5;
border:1px dashed black;
position:relative;
clear:both;
float:left;
width:100%;
height:100%;
min-height:100%;
padding-bottom: 10px;
overflow:hidden;
}

div#header {
background-image: url(images/.gif);
background-repeat: no-repeat;
border:1px dashed black;
margin:0px;
padding:0px;
width:100%;
height:80px;
}

div#menu {
clear: both;
background-color: #CA7B93;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

div#left1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
float:left;
margin:5px;
width:20%;
height:auto;
}

div#left2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#content1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
margin:5px auto;
width:54%;
height:auto;
}

div#content2 {
background-color: #DEC6B5;
background-image: url(images/bkg3.gif);
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
width:96%;
height:auto;
}

div#divider {
background-image: url(images/.gif);
background-repeat: no-repeat;
margin:10px auto;
width:439px;
height:60px
}

div#right1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
float:right;
border:1px solid black;
margin:5px;
right:10px;
width:20%;
height:auto;
}

div#right2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#footer {
clear: both;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you.

Code:

#content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}

/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/

/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/

/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/

Code:

<div id="content"><!--CONTENT SECTION START-->
   PHP MENU IS CREATED HERE...
   <div id="locationBox"><!--OPEN BOX-->
      <div class="boxTop"></div>
      <div class="boxContent">
         <div class="locInfoMap">
            MAIN CONTENT GOES HERE...
         </div>
      </div>
   </div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->

How do you make a container div aware of the height of floated divs nested inside?

I have 2 floated divs, which are contained within a container div. The container has a background image that I need to tile vertically.

In FF the image does not tile unless I specifiy a height for the container other than auto. I don't want to set it to 100% because when I do, the container div extends much further than I intend it to.

Here is the link to the site with the problem.

CSS
Code:

 /* CSS DOCUMENT */
html, body {
  padding: 0px 0px 0px 0px;
  font: 10px Verdana, Arial, Halvetica;
  height: 100%;
  text-align: center;
  background: url(../images/bdy_back.jpg) #252525 no-repeat center;

#container {
  width: 938px;
  margin: 0 auto;
  text-align: left;
  height: auto;
  opacity: .90;
  filter: alpha(opacity=90);
  background: url(../images/middle2.jpg) repeat-y right #444444;
}
#lcol{
  float: left;
  width: 15%;
  height: auto;
}

#right {
  float: right;
  width: 85%;
  height: 100%;
}


}
 

HTML
Code:

<div id="container">
  <div class="hdr">

	<div id="officer" style="display: none;"></div>
  </div>
  <div id="lcol">
   
  </div>
  <div id="right">
    
  </div>
</div>
<div id="footer">

</div>

The situation is very simple:

Code:

<div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
    <div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
        red box<br>
        red box<br>        
        red box<br>
        red box<br>
        red box<br>        
        red box<br>                
	</div>

    <div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
        green box<br>
        green box<br>
        green box<br>
        green box<br>        
	</div>
</div>  

AS you can see, I have a main div. Inside it, I have 2 divs:
red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows.

What I need is either enter text in the red or green divs and make the main div to auto resize.

(I'm using Mozilla FireFox)

Any Idea?

Hello,

I've created a wrapper div for my main content and I center it on the page by setting margin left and right to auto. I add some content to it but the height of the wrapper never grows larger than the content. How can I make it so the background color of the wrapper, for example, goes to the bottom of the browser regardless of the amount of content inside of it? Thanks in advance.

I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it.


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFFF00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  width: 100%;
}
table {
  border: 0px solid #000000;
  border-collapse: collapse;
  border-spacing: 0px;
}

#columnleft {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: left;
}
#columnright {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: right;
}
#footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
#clearfooter {
  clear: both;
}
#header {
  margin: 0px;
  padding: 0px;
  width: 100%; 
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position:relative; */
}
#main {
  margin: 0px;
  padding: 0px;
  width: 79.8%;  /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #FFFFFF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
  float: left;
}
#wrapper {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  /* min-height: 80%; */  /* Might not be needed, it's an IE Hack... */
  background-color: #FF0000;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>

<body>
<div id="header">Header Text</div>
 <div id="wrapper">
  <div id="columnleft">Left Text</div>
  <div id="main">Center Content</div>
  <div id="columnright">Right Text</div>
 </div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html> 

Thanks,
FletchSOD

I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works.

Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ?


Thanks in advanced.

Does anyone know how to set the height so it's 100% of the page size? Setting "height: 100%" doesn't seem to work. Thanks!

#bottomLeft
{
position: absolute;
height: 100%;
padding: 0;
margin: 0;
width: 175px;
}

Hi,

I'm working on my homepage at www.wecook.co.uk and want the grey background to at least be big enough to fill the whole page on most resoultions - currently on my monitor (1280 x 1024) it ends and i get a white at the bottom of the page - could someone suggest how i can adjust my css to fix this?

any help is appreciated.

thanks

Hi, I'm trying to make a div in my website take up the entire height of the page, or more if the page is longer.
However when I've managed to get the div the full height of the page, the contents leave the div when it's longer than the page.
I want the div to stretch, but be at least as long as the page.

Here is a simplification of my code as an example:
Code:

<html>
<head>
<style>
.contentdiv{
height: 100%;
width: 758px;
top: 0px;
position: relative;
border: 1px solid #89a9c7;
padding-top: 0px;
padding-bottom: 0px;
border-spacing: 5px;
bottom: auto;
}

.footerdiv
{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div class="contentdiv">
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />

<div class="footerdiv">a</div>
</div>
</body>
</html>

Hi guys,

I have a problem that really bugs me and I'm probably not seeing the super-easy simple solution that is certainly there.

s369533597(dot)onlinehome(dot)us

s369533597(dot)onlinehome(dot)us(slash)templates(slash)edison(slash)css(slash)template(dot)css

and art.sheet is the tag.

(site build on joomla 1.6)

If your browser window will show more than 900px in height you'll see immediately my problem. the "body content" area will resize to the window height and not to the amount of content in it leaving a lot of blank space depending on the browser window height. I've tried all the min-height and height options and combinations but nothing really works. If I'll set up a particular height for that tag it will be OK for the home page but on any other page the overflow look awful. I just can't make it fluid.

any advise?

alright I'm stumped so please please please help me out!

I have a page that's 100% in height, and usually there's more information so you have to scroll down. but I can't seem to activate the scrollbar. I've tried overflow, messing with the height attribute, i have no idea how to solve this. my page: http://www.aapinboom.nl/luxeduinvil...ntroductie.html

and this is the code:
Code:

html,body {	
	background-image: url('../images/bg.gif');
	margin-top: 0px;
	margin-bottom: 0px; 
	margin-left: 0px; 
	margin-right: 0px;	
	font-family: "Trebuchet MS";
	font-size: 13px;
	height: 100%;
	}
	
#center {
	text-align: center;
	width: 100%;
	height: 100%;
}

#container {
  margin-left: auto;
  margin-right: auto;
	width: 600px;
	height: 100%;
	border: 1px solid #B8B8B8;
	background-color: #FFFFFF;
	text-align: left;
}

thanks for any suggestions!

Hey everyone. I've read this forum for a long time, and I've finally broken down and joined to seek help for my CSS problem.

I cannot get my container to do what I want it to. I'm starting a new site for my family business, and I've uploaded one page for you to look at. I left the CSS code in the source in order to see.

Basically, if there's too much content, the page background will not fill the screen as intended if the window is scrolled. If there's too little content, the background does fill the page, but most pages on my site will not be as such. I've also included the code below. Any help is appreciated!!

Note: Please don't mind the filler pictures, text, and heading styles.

http://bresslersinc.com/new_site/index.html

and the <head>

Code:

<!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">
<!--

/*  I THINK THIS IS WHERE THE PROBLEM IS. If I get rid of the below two sections of code, all links work on the site, but then my container doesn't fill 100% height until there's enough content to do so   */

html, body {
	height: 100%;
	min-height: 100%;
	}

* html #container {
	height:100%;
	min-height: 100%;
}

body {
	background-color: #666666;
	text-align: center;
	background-image: url(core_images/site_bg.gif);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	margin: 0;
	padding: 0;
	text-align: center;
	height: 100%;
	width: 100%;
}

#container {
	background-color: #999999;
	background-image: url(core_images/container_bg.jpg);
	border-left: medium solid black;
	border-right: medium solid black;
	position: relative;
	width: 700px;
	top: 0;
	margin: 0 auto;
	height: 100%;
	padding: 0px;
	padding-bottom: 1px;
	text-align: left;
	min-height: 100%;
	}
	
#header {
	height: 100px;
	width: 700px;
	border-bottom: medium black solid;
	position: relative;
	top: 0px;
	left: 0px;
	padding: 0px;
	text-align: left;
	background-color: #999999;
	}
	
#headeroverlay {
	height: 100px;
	width: 700px;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0px;
	text-align: left;
	background-image: url(core_images/headeroverlay.png);
	}
	
#sidenav {
	width: 160px;
	height: auto;
	top: 140px;
	left: 0px;
	padding: 0;
	margin: 0;
	position: absolute;
	}

#sidenav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 40px;
	}
	
#sidenav li {
	margin: 0px;
	padding: 0px;
	width: 100%;
	}

#sidenav li a {
	display: block;
	padding: 0 0 0 3px;
	color: #ffffff;
	text-decoration: none;
	background-image: url(core_images/list_button.png);
	}
	
#sidenav li a:hover {
	display: block;
	padding: 0 0 0 3px;
	color: #ffffff;
	text-decoration: none;
	background-image: url(core_images/list_button_mouse.png);
	}
	
#emailsignup {
	top: 420px;
	left: 0px;
	position: absolute;
	width: 152px;
	height: 140px;
	padding: 0px 5px 5px 3px;
	background-image: url(core_images/signup_button.png);
	background-repeat: no-repeat;
	color: #ffffff;
	line-height: .8em;
	} 
	
#emailsignup h3 {
	font-size: 11pt;
	line-height: .5em;
	}
	
#emailsignup p {
	font-size: 9pt;
	margin-top: 0px;
	margin-bottom: 0px;
	}
	
#changingpicturebody {
	top: 103px;
	left: 150px;
	width: 550px;
	height: 250px;
	position: absolute;
	margin: 0px;
	padding: 0px;
	}

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}

.formwidthindex {
	width: 100px;
	line-height: 80%;
	padding: 6px 0 0 0;
	}
	
.cushycms {}

#maincontent {
	width: 400px;
	height: auto;
	top: 354px;
	left: 165px;
	padding: 0px;
	position: absolute;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	}
	
#maincontent h2 {
	margin: 0;
	font-family: helvetica;
	font-size: 13pt;
	border: thin solid black;
	font: arial;
	padding: 5px;
	line-height: 22px;
	background: url(core_images/h3bg.png) repeat-x;
}
	
#maincontent h3 {
	margin: 0;
	font-family: helvetica;
	font-size: 11pt;
	border: thin solid black;
	font: arial;
	padding: 5px;
	line-height: 20px;
	background: url(core_images/h3bg.png) repeat-x;
}

#maincontent h4 {
	margin: 0;
	font-family: helvetica;
	font-size: 10pt;
	border: thin solid black;
	font: arial;
	padding: 5px;
	line-height: 18px;
	background: url(core_images/h3bg.png) repeat-x;
}

#maincontent p {
	font-size: 10pt;
	color: black;
	padding-left: 5px;
	}
	
#subcontent {
	width: 125px;
	height: auto;
	left: 570px;
	position: absolute;
	top: 353px;
	border-left: solid thin black;
	padding: 2px;
	background-color: #666666;
	}
	
#subcontent h3 {
	margin-top: 0px;
	font-size: 10pt;
	color: white;
	font-family: helvetica;
	line-height: 15px;
	background: url(core_images/h3bg.png) repeat-x;
	border: thin solid black;
	width: 100%;
	}

#subcontent p {
	color: white;
	font-size: 10pt;
	}
	
#footer {
	bottom: 100%;
	position: absolute;
	left: 0px;
	background-color: black;
	width: 700px;
	border: medium solid white;
	height: 60px;
	}	
	
-->
</style>



</head>