CODEWITHSUNDEEP
jquerycsshtml
Zydeco
Zydeco

Reputation: 530

CSS and jQuery: document.height not reporting properly? div won't stretch vertically

Oddly enough I can't seem to find anyone with this issue. O_o

Pastebin

Code leaves a gap between the end of #main and the end of the actual page on IE, Chrome (and Safari), but not on Firefox.

Vanilla CSS has html, body{ min-height: 100%; height: auto !important; }. #content is position: relative inside #main.

Trying to get #main to stretch from the top to the bottom of the page.

Edit: After playing with it more, it seems to me that everything depends on #content having its entire content loaded before the CSS-change calculations take place. Switching from one page to another allows Chrome (and Safari) to set the proper height for #main. Is there any way I can 'tell the code to wait'? Although I'm not sure if this fixes the problem with IE

Upvotes: 1

Views: 686

Answers (1)

Nimrod
Nimrod

Reputation: 1346

<html>
    <body>
        <div id="main">
            <div id="content">
                <p>content area</p>
            </div>
        </div>
    </body>
</html>

And the CSS 

html, body {height: 100%; margin: 0; padding: 0}
#main {
    min-height: 100%;
    height: auto !important;
    width: 1024px;
    position: absolute;
    top:0; 
    left:50%;
    margin-left:-512px
}
#content {margin: 135px 0 0 300px}

/* for illustrative purposes */
#main {background-color: #CDE}

Check out the fiddle
http://jsfiddle.net/UB975/6/

Upvotes: 1

Related Questions