100% height and weird issues

Question

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)

You have: uslt-content (100% height) + header (non zero height) + footer (also non zero height) > 100% — mishik, Jun 28 '13 at 20:00
This might help: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page/ — Alp, Jun 28 '13 at 20:06
i removed height and overflow from uslt-content, but now the columns don't extend to the bottom. — Chris, Jun 28 '13 at 20:09
Do you want the footer visible even when there is enough content to cause scrollbars? Or should the footer be pushed below the fold in that case? — gilly3, Jun 28 '13 at 20:11
i would like the footer pushed off the fold if the content is too long. but yea, if too short, to show the footer at the bottom. — Chris, Jun 28 '13 at 20:26

score 2 · Accepted Answer · edited Jun 28 '13 at 20:23

2

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;
}

edited Jun 28 '13 at 20:23

Ryan B

3,364
21
35

answered Jun 28 '13 at 20:18

Ilya Streltsyn

13,076
2
37
57

The problem was that .uslt-content + .uslt-footer + .uslt-header had a height of 100% + 136px. The margin will offset this, but if you add content, the first 68 pixels will be displayed under de header (and the last 68 under the footer). If you would add padding to counter this, the total height will be bigger than 100% again, so to correctly do this, you need to add an element inside .ustl-content, and add css for that element `margin: 68px 0;`. See [this jsfiddle](http://jsfiddle.net/Sumurai8/QEVxC/). Can you add that to the answer? – Sumurai8 Jun 28 '13 at 20:30
awesome! this works, but the only thing is if the uslt-innercontent is too large, it goes under the footer. – Chris Jun 28 '13 at 20:41
You need to set `min-height: 100%` instead of `height: 100%`. This will allow the box to grow if there is too much content – Sumurai8 Jun 28 '13 at 20:46
sweet, now the 2nd step of my issue- http://jsfiddle.net/QEVxC/1/ i'm trying to put columns within uslt-innercontent, and want them to stretch down as well. – Chris Jun 28 '13 at 20:55
@Chris I am not sure how to get that to work properly. To get the columns at full height, all the parent elements need an absolute height, but this will mess up the layout. Besides that, I am not sure if a floating element can inherit the height of their parent element. I recommend opening a new question for that. – Sumurai8 Jun 29 '13 at 07:39

100% height and weird issues

1 Answers1