Problem with container height

I’m this close to punching a hole through the matter of the universe itself.

I’ve been struggling with this problem for the last 6 hours, and barely made any progress. I’ve searched Google long and wide, and all results offer the same “solution”, which doesn’t work.

The problem is I can’t get the main container to stretch the whole height of the page. In Chrome developer tools, if i hover on the #main-container element, it only highlights the part of it exactly above the fold. So if I scroll a little down, the highlight stops exactly where the bottom of the page was before scrolling down. I don’t know how to explain it properly, I hope you understand what I’m talking about.

I set html, body { height: 100% }, and #main-container { min-height: 100% }.

TL;DR: The height of the page’s main container is exactly the height of the fold, and does not go all the way to the bottom.

:)) I know the feeling

It would help if you could put a link to the website that’s causing you problems… From what you described, I would say give it a “clear” css rule, but probably it’s something else?

girlscancode said
:)) I know the feeling It would help if you could put a link to the website that’s causing you problems… From what you described, I would say give it a “clear” css rule, but probably it’s something else?

Well, it’s still a work in progress so it’s not published yet. However, I have a suspicion that using a grid which floats all elements might have something to do with this, but I don’t know for sure.

float elements height is ignored in a container wrapper – add a clear after your content for the height to inherit

Jonathan

* {
margin: 0;
padding: 0;
border:0;
}
html, body {
min-height:100%
height:100%;
overflow:hidden;
}
div#main-container {
min-height:100%
height:100%;
clear:both;
}

Thank you Jonathan, I forgot I needed to clear the floats .

@OrganicBeeMedia That causes the page to not scroll.

novalex said
Thank you Jonathan, I forgot I needed to clear the floats . @OrganicBeeMedia That causes the page to not scroll.

I was assuming making the wrapper with a height of 100% you didn’t want it to scroll and its just the overflow if you remove it, it’ll scroll again

OK, now I ran into another problem. In order for the page to be adaptive, the top navigation moves to the side. Same story, the navigation background doesn’t continue beyond the fold. I tried containing it within another div with height: 100% and a clear:both div before the container div end, but no luck.

The structure is like this:

<div class="nav-container">
<div class="top-bar">
  <ul id="nav">
     <li class="nav-item"> all navigation elements are contained in list items</li>
  </ul>
</div>
<div class="clear" />
</div>

CSS:

    .nav-container {
        width: 80px;
        min-height: 100%;
        background: url(../img/grad-overlay-hz.png) 0 0 repeat-y #292929;
        border-right: 1px solid #515151;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
    }
    .nav-container .clear {
        clear: both;
    }
    .top-bar {
        width: 80px;
        float: left;
        zoom: 1;
    }
    #nav {
        margin: 0;
    }
    .nav-item {
        clear: both;
        margin-top: 6px;
        margin-left: 0;
    }