Grow your CSS skills. Land your dream job.

100% Height Sidebar

  • # March 11, 2013 at 10:15 am

    How to do that div.left won’t cross the black border?

    P.S. Is there way doing without overflow: hidden;?

    http://jsfiddle.net/xtNPA/

    # March 11, 2013 at 10:24 am

    Not given the current structure.

    You told it to have same (100%) height as the parent div…but that includes the ‘top’ div’ so it’s adding the height of the that div on to your ‘left’ div.

    Take the ‘top’ div out of the ‘full’ div.

    # March 11, 2013 at 10:55 am

    I know what’s the problem but there is any way to do it? I mean without taking top and left?

    # March 11, 2013 at 11:23 am

    >I mean without taking top and left?

    I’m not sure what that means.

    If you take the top ‘div’ out of the ‘full’ div but place the top’ div before the ‘full’ div in your HTML you will get the **look** you are after.

    If you add content to the ‘full’ div though….it probably won’t work as you think it might.

    This might help though: http://codepen.io/anon/pen/asxch

    # March 11, 2013 at 3:07 pm

    Is the intention that minimum height of the page will always be the size of the viewport unless there is enough content to make the page scroll?

    # March 11, 2013 at 4:00 pm

    .className {
    position: fixed;
    top: 40px;
    bottom:0;
    border: yellow;
    }

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".