Treehouse: Grow your CSS skills. Land your dream job.


  • Anonymous
    # December 12, 2012 at 3:22 am

    I’ve reworded the question.

    # December 12, 2012 at 5:25 am

    You’re going to hate me but I wouldn’t code it quite like you have.

    Within the container, I would have two ‘master’ divs (one for the sidebar area and the second for the content)

    See something like:

    # December 12, 2012 at 3:42 pm

    Updated the code to have two divs as you suggested, since that does make sense. I must still be missing something because the dark gray content area is still not going the full height of the page, even though the div wrapping both sides is set to min-height: 100%.

    # December 12, 2012 at 4:50 pm

    Have you set the body, html & ‘wrapper’ to 100% height (not min-height)?

    # December 12, 2012 at 5:17 pm

    Yes, the reset always had :

    html, body { height:100%; }

    If I change the container (wrapper) from min-height to height, no change occurs. If I then add _height: 100%_ to _#bside_ then it goes the full height BUT if the content in bside goes beyond the height of the browser, no scroll occurs so it just isn’t displayed. Not what I need.

    # December 12, 2012 at 5:20 pm

    Ah…well that’s a different issue.

    # December 12, 2012 at 5:27 pm

    Setting #bside or #contentframe to _position: absolute_ has the same effect. Looks right but doesn’t function properly.

    # December 12, 2012 at 6:04 pm

    To do that you must set body and html height to 100%

    body, html {
    Height: 100%;
    #full-height {
    min-height: 100%;

    Full-height is the object you want full height.

    # December 12, 2012 at 7:40 pm

    That doesn’t seem to solve what I’m asking at all. Again, the reset in the CSS already has body and html set to height 100%

    # December 12, 2012 at 9:55 pm


    you are going to hate me but,
    looking at your codepen, you are specifing line height in px which is wrong and incorrect
    the line height should always be unitless as ratio or percentage of given element font size
    remeber that line height passes on to decendent elements font sizes and will not change if font size is diferent size while specifying line height in units, it’s just a bad practice

    # December 13, 2012 at 5:25 am


    The line-height was merely a placeholder to centre the text in that specific codepen. I would never use it like that IRL.

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Reworded.’ is closed to new replies.