100% height on ajax request

[rockinaway]

I have 2 divs, div1 and div2.

 

At the moment, div1 is a sidebar which I was to have the entire height of the page (not the window but the page!). I have content loaded in div2 via AJAX, but if the height exceeds the initial page height (which has set the initial height of div1), div1 doesn't increase with height.

 

How can I update the height of div1 to the new page height each time?

[AyKay47]

post the relevant code.

[rockinaway]

There is no real code to show as nothing seems to work, so I don't have anything. But basically:

 

<div class="sidebar">Content</div>

<div class="main">Ajax loaded content</div>

 

The sidebar has to be 100% of the page, all the time, even when the content of main is changed to make it bigger than the window height.

[AyKay47]

are you using the float property on your sidebar? please post the relevant CSS

[rockinaway]

/* Main */
html {
height:100%;
}

body {
        background-color:#FFFFFF;
        font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
        font-size:11px;
        margin:0px;
height:100%;
}


.main {
        width:950px;
        margin-right:auto;
padding-top:120px;
margin-left:230px;
}

.sidebar {
background-color:#F2F2F2;
min-height:100%;
width:220px;
position:absolute;   ------> or I have tried float:left; but that ruins the rest of my layout
border-right:1px solid #D4D4D4;
}

 

Hope that helps

[AyKay47]

change your css to this, you will use float on your sidebar, and will add an overflow property to .main, in combination with the width property, the overflow property acts as a sort of clear fix for the float child element.

 

.main {
width:950px;
overflow: hidden; // can also be auto, hidden is recommended       
margin-right:auto;
padding-top:120px;
margin-left:230px;
}

.sidebar {
background-color:#F2F2F2;
min-height:100%;
width:220px;
float: left; //absolute positioning should be avoided here
border-right:1px solid #D4D4D4;
}

 

[rockinaway]

This doesn't seem to help. When content in main is loaded through an ajax click, it it bigger than the initial loaded page, so the page stretches down. However, the sidebar doesn't follow it for some reason and it remains the same height it was when the page loaded (i.e. 100% of the window/body)

[rockinaway]

Okay, did a little testing. The sidebar is only ever being 100% of the browser window and now the entire page (even if initial content is taller than the browser window)

[AyKay47]

can you show a little of your html, it would help to see the DOM in this situation to see the parent/child relationships.