CODEWITHSUNDEEP
htmlcss
Shawn Mclean
Shawn Mclean

Reputation: 57469

How can I make height: "100%" work cross browser in CSS?

I have 2 columns that are achieved by floating. They do not stretch to 100% when using css. How do I achieve this?

Upvotes: 0

Views: 4732

Answers (6)

DoctorLouie
DoctorLouie

Reputation: 2674

This should do the trick:


    <script language="Javascript" src="http://i.ngen-io.us/core/js/b4dom.js"></script>
    <script language="Javascript">
    var currHeight = document.body.clientHeight;
    document.getElementById("MyColumnDiv").style.height = ''.currHeight.'px';
    </script>

You can also set the width using this example. Feel free to reuse my library, but please note its source in your code.

Upvotes: 0

Said
Said

Reputation: 186

Try this css & html, tested and works in FFx 3.5, IE 8 & Safari 4 - works partially in IE7 by applying a background color to #container.

<style type="text/css" media="screen">
#container  { width:800px; margin:25px auto; position:relative;display:block;overflow: hidden;}
#header     { height: 80px;background: #eee; }
#wrapper    { float:left;width:100%}
#col2       { margin:0 200px;background: #ddd; }
#col1       { float:left; width:200px; margin-left:-800px; background: #eee; }
#col3       { float:left; width:200px; margin-left:-200px; background: #ccc; }    
#col1, #col2, #col3 { padding-bottom:32767px!important; margin-bottom:-32767px!important; }
#footer     { clear:both; background: #aaa; padding:10px;height: 20px;}
* > #footer { position:relative; z-index:20; }    
</style>

Using this HTML Structure

<div id="container">
    <div id="header"></div>
    <div id="wrapper">
        <div id="col2"></div>
    </div>        
    <div id="col1"></div>        
    <div id="col3"></div>        
    <div id="footer"></div>    
</div>

Regards Said

Upvotes: 0

Gary Willoughby
Gary Willoughby

Reputation: 52498

To achieve 100% height using CSS you must make sure the enclosing block is also set to height: 100%; including the <html> element.

html, body
{
    height: 100%;
}

#YourBlock
{
    height: 100%;
}

Upvotes: 0

Gordon Gustafson
Gordon Gustafson

Reputation: 41209

try setting the min-height on that columns and all all of their containing elements (including body and html) to 100%. see here

EDIT: I've heard that this won't work in ie8, but I've tested it and it looked ok,

Upvotes: 1

Khalid Abuhakmeh
Khalid Abuhakmeh

Reputation: 10839

#columns {
    height:100%;
}

The problem with css and height is that it is not consistent across browsers. You would be better off not worrying about height. You also have the issue of different screen resolutions.

If height is really important I would tackle it with JavaScript.

Upvotes: 0

Shawn Mclean
Shawn Mclean

Reputation: 57469

I did some research on this and there is no way to do in it css intuitively. There are ways such as tricking the aesthetics by using an image behind the short column to repeat downwards.

Other way is using javascript, If i find those posts, i'll update this.

http://www.thechoppr.com/blog/2009/02/09/2-column-fluid-layout-100-height-with-leftright-sidebar/

Upvotes: 1

Related Questions