Auto stretch with height 100% [Part 2]

Hi,

This is related to my previous post “auto stretch with height 100%”.

I found this problem when I try to insert dynamic content to the page and it seems like the left sidebar doesn’t auto stretch to the bottom. Would appreciate if anyone could point me to the right direction. Do i have to use javascript to “pull” the bar or can it be accomplish using css?

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script>
function show( ) {
    for( var i=0; i<30; i++ ) {
        $("#dynamic").html( $("#dynamic").html( ) + "<p>I'm a dynamic content so dynamic I exploded!</p>" );
    }
    return false;
}
</script>
<style type="text/css" media="screen">
body {
    margin:0;
    padding:0;
    height:100%;
}
#left {
    position:absolute;
    left:0;
    top:0;
    padding:0;
    width:200px;
    height:100%;
    color:#333;
    background:#eaeaea;
    border:1px solid #333;
}
.content {
    width:90%
    color:#333;
    background:#ffc;
    border:1px solid #333;
    padding:0 10px;
    text-align: right;
}
</style>
</head>

<body>
<div id="left">
<p class="top">LEft column
</div>

<div class="content">
<p><a href="#" onclick="show();">Show Dynamic Content</a></p>
<div id="dynamic"></div>
</div>

</div>
</body>
</html>

it seems like the left sidebar doesn’t auto stretch to the bottom.

Hi,
It’s not supposed to follow your content div. Working with CSS layouts is not the same as tables. The only way you can get equal height columns with css is to fake them. The easiest way to do that is to use the Faux Columns method.

Have a look here for more info on Equal Height Columns.

You can’t use height:100%; like that because the left column will never expand when content is greater than the height of the viewport, the content would spill out of it.

See the FAQs for more info on 100% height

Thanks for your reply Rayzur. I realize I’d have use table instead. Totally eliminate all troubles :slight_smile:

Hi,

You could do something like this:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script>
function show(el) {
    for( var i=0; i<30; i++ ) {
                 $(el).html( $(el).html( ) + "<p>I'm a dynamic content so dynamic I exploded!</p>" )
        }
    //fix ie absolute content bug
        elname = document.getElementById("outer");
        elname.className = elname.className;
        return false;
}
</script>
<style type="text/css" media="screen">
html, body {
    margin:0;
    padding:0;
    height:100%;
}
#outer {
    min-height:100%;
    background:#ffc;
    overflow:hidden;
    border-right:1px solid #333;
    border-left:1px solid #333;
    position:relative;
}
#left {
    float:left;
    padding:0;
    width:200px;
    color:#333;
    min-height:100px;
}
#left .bg {
    width:200px;
    border-right:1px solid #333;
    background:#eaeaea;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    z-index:1;
}
.inner {
    position:relative;
    z-index:2;
    width:200px;
}
.content {
    color:#333;
    padding:0 10px;
    text-align: right;
    overflow:hidden;
}
* html #left .bg {
    top:auto;
    bottom:0;
    height:999em;
}
* html .content,
* html #outer,
* html #left {height:100%;overflow:visible}
</style>
</head>
<body>
<div id="outer" class="test">
    <div id="left">
        <div class="inner">
            <p><a href="#" onclick="show('#dynamic2');">Show Dynamic Content</a></p>
            <div id="dynamic2"></div>
        </div>
        <div class="bg"></div>
    </div>
    <div class="content">
        <p><a href="#" onclick="show('#dynamic');">Show Dynamic Content</a></p>
        <div id="dynamic"></div>
    </div>
</div>
</div>
</body>
</html>


Although as Ray said above faux columns are easier.

That’s some neat stuff Paul, thanks! Though I’ve changed my structure to use table, its great for a study in your css. :smiley: