Div to be full screen size regardless of res - min-height 100%?

Discussion in 'CSS' started by le007, Apr 11, 2012.

0
  1. #1
    Hi all,

    I want the "main" div to reach the bottom of the screen (just above the footer div) regardless of resolution size? How can this be achieved?
    I tried min-height: 100% but that didn't work. I don't want to put in height: 500px; - I want to be automatic.

    Thanks a mill.

    link is here:
    http://www.ivansilvermansecurities.co.uk/link/link2.php

    <head>
<style>
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}

html, body {
margin : 0;
padding : 0;
height: 100%;
background: url(grey.jpg);
}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#topbarr{
width:100%;
background-color:blue;
height: 60px;

}

#yellowbar{
width:100%;
background-color:yellow;
height: 60px;

}


#container{
width:780px; 
margin:0 auto;
background-color: pink;
}


#main{
min-height: 100%;
width:auto;
background-color: white;
color: blue;
padding:10px 0;
}

div.spacer{height:10px; display:block;}

#footer{width:auto;
padding:10px 0;
font-size:11px;
color: white;
}









<!--
.fon_img {
    left: 0;
    top: 0;
    width: 100%;
	margin-top: 120px;
    z-index: 1;
}


.content {
width:expression(document.body.clientWidth < 900? "900px": "auto" );
left: 0;
min-width: 900px;
position: absolute;
top: 0;
width: 100%;
  z-index: 5;
}

-->





</style>

</head>
<body>

<img id="fon_img" class="fon_img" src="bk1.jpg" />
<div class="content">




<div id="topbarr">

</div>

<div id="yellowbar">
</div>


<div id="container">


	<div id="main">

		Content here:

	</div>





<div class="spacer"></div>
</div>


</div>



<div id="footer">© 2008 Information about your site</div>
</div>
    Code (markup):
     
    Last edited: Apr 11, 2012
    le007, Apr 11, 2012 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Not tested in IE; built for IE7 but not IE6.

    http://stommepoes.nl/Leo/leo.html

    Like everyone else told you, get rid of the position: absolute. You can't center abso-po'd sh*t with automargins.
     
    Stomme poes, Apr 12, 2012 IP
  3. Trix

    Trix Peon

    Messages:
    192
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    0
    #3
    I hope you are trying to achieve "sticky footer"...

    Check this link.... http://ryanfait.com/sticky-footer/

    Seach in google with this term.. you will get many different sources
     
    Trix, Apr 15, 2012 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #4
    You can't stop the main div where the footer starts, but you can start the footer where the main div stops. Easy!
     
    wiicker95, Apr 16, 2012 IP
  5. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    Thanks Poes!

    Cheers wiicker95. I never heard of a sticky footer, Trix. Thanks, will google it.
     
    le007, Apr 16, 2012 IP