CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 15

100% height and weird issues

so i've looked over the following past questions and i still can't figure out why this is happening:

XHTML HTML element with 100% height causing scrollbars

Body height 100% displaying vertical scrollbar

here is my jsfiddle: http://jsfiddle.net/G4kgW/5/

CSS

body {
    background-color:#ccc;
    height:100%;
    overflow:hidden;
}

div {
    display:block;
    position:relative;
}

html {
    background-color:#f00;
    height:100%;
    overflow:hidden;
}

.uslt-wrapper {
    height:100%;
    overflow:auto;
    width:100%;
}
.uslt-content {
    background-color:#00f;
    height:100%;
    margin:0px auto;
    width:90%;
}

.uslt-footer, .uslt-header {
    background-color:#24427c;
    height:68px;
    width:100%;
}

.uslt-logo {
    color:#fff;
    height:68px;
    margin:0px auto;
    width:230px;
}

HTML

<div class="uslt-wrapper">
    <div class="uslt-header">
        <div class="uslt-logo">
            <h1>Logo</h1>
        </div>
    </div>
    <div class="uslt-content">
    </div>
    <div class="uslt-footer">
        <div class="uslt-logo">
            <h2>Logo</h2>
        </div>
    </div>
</div>

i'm trying to achieve (without HTML5/CSS3) something to where if the window is too large for the page, the middle area will expand to take up the extra space.

but i'm running into an issue to where no matter what the window size, i get scroll bars, even tho there is currently no content, just CSS styling. (please note the jsfiddle link has CSS resets)

Upvotes: 1

Views: 240

Answers (1)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13526

Your class, uslt-content, inherits 100% of the height of <HTML> element, which has the viewport height. So .uslt-wrapper gets overflowed.

One of the possible solutions — let the header and the footer to overlap above the content (jsFiddle Demo):

.uslt-content {
    background-color:#00f;
    height:100%;
    margin: -68px auto;
    width:90%;
}

.uslt-footer, .uslt-header {
    background-color:#24427c;
    height:68px;
    width:100%;
    position: relative;
    z-index: 1;
}

Upvotes: 2

Related Questions