80 posts
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Has referred 1+ members
  • Has been part of the Envato Community for over 3 years
+2 more
novalex says

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.

286 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Has referred 1+ members
+3 more
girlscancode says

:)) 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?

80 posts
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Has referred 1+ members
  • Has been part of the Envato Community for over 3 years
+2 more
novalex says

:)) 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.

2378 posts Bird is the word..
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 7 years
+8 more
jonathan01 says

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

Jonathan

3436 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says
* {
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;
}
80 posts
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Has referred 1+ members
  • Has been part of the Envato Community for over 3 years
+2 more
novalex says

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

@OrganicBeeMedia That causes the page to not scroll.

3436 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says

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

80 posts
  • Has sold $10,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Has referred 1+ members
  • Has been part of the Envato Community for over 3 years
+2 more
novalex says

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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by