0

I like to think I'm pretty good with CSS, but this issue is driving me crazy.

I'm trying to get 3 columns to be 100% height. The first two columns are floated left, the third is not floated, just margined over. There is a wrapper around all 3 columns that clears the floats. The HTML/BODY tag have 100% height on them. As far as I know, if all parent containers have 100% height, it should work. The wrapper should be as tall as the tallest content block (third column), so the first two columns should be that tall too, using 100% height.

Problem is, the wrapper, and thus the body tag, have a height equal to that of the browser window. For some reason it won't read the middle columns content height. There is probably a super stupid simple explanation for this and I'm just missing it.

Don't want an overflow hack. Cannot do faux columns. I don't see why this can't work using the CSS spec for height.

If I put a pixel amount on the wrapper div, like a 2000px height, the first two columns fill the height just like I want them to. Why isn't this working??

HTML:

<body>
    <div class="wrapper clearfix">

        <section class="sidebar-news clearfix"></section>

        <section class="black-bar-vertical"></section>

        <section class="section-main-content event-detail"></section>

    </div>
</body>

CSS:

html {
    height: 100%;
}

body {
    background-color: #333;
    height: 100%;

    * {
        box-sizing: border-box;
    }
}

.wrapper {
    height: 100%;
    position: relative;
    margin: 0 auto;
}

.sidebar-news {
    float: left;
    width: 300px;
    height: 100%;
    min-height: 100%;
    background-color: @site-color-yellow;
    margin-right: -25px;
    padding: 76px 40px 20px 20px;
}

.black-bar-vertical {
    position: relative;
    float: left;
    width: 116px;
    background: url("@{img-path}/black-bar-vertical.png") repeat-y top center;
    min-height: 100%;
    height: 100%;
    text-align: center;
    margin-right: -25px;
    padding-top: 81px;
    z-index: 50;
}

.section-main-content {
    width: 580px;
    background-color: #FFF;
    padding-top: 55px;
    padding-left: 10px;
    margin-left: 360px;
}

SCREENSHOTS:

Top & Bottom of page

The height of the two columns in dev tools

EDIT:

Found this article, which is basically the same problem. html body is smaller than its contents

If I change the height property to min-height on the body, the wrapper becomes the full height of the content, yay! But then the 100% heights on the first two columns don't work at all.

Like I originally thought... if 100% height is set on an element, it bubbles up the dom, and inherits the height of it's parent container. If that parent container has 100% height, it inherits the height of the parent's parent, etc. That works as expected. But when it hits the body tag, with 100% height, it's reading that as 100% height of the browser window. That's the default behavior, which doesn't make sense to me. If you take off the height on the body, it encompasses all content, but then the wrapper div looks up to the body for it's height definition and get's nothing because there is no height set on the body.

It's seeming like this specific scenario isn't really possible without using flexbox, table layout, javascript, or absolutely positioned elements.

Community
  • 1
  • 1
Stephen Starzyk
  • 45
  • 6
  • Make a jsfiddle maybe? it's easier for me to find solutions by messing with the code. – Eric Guan Mar 04 '16 at 01:52
  • https://jsfiddle.net/p6o5ph9j/ - if you add a pixel height to the wrapper div, the first two columns fill the height. But with 100% height, it doesn't work the same. Shouldn't the body/wrapper be 100% of the content, not the browser window? – Stephen Starzyk Mar 04 '16 at 15:12

2 Answers2

0

Flexbox fo-sho!

.wrapper {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    align-items: stretch;
}
.sidebar-news {
    min-height: 100vh;
    flex-grow: 1;
}

.black-bar-vertical {
    min-height: 100vh;
    flex-grow: 1;
}

.section-main-content {
    min-height: 100vh;
    flex-grow: 1;
}

Check this out for ref- Flexbox CSS Tricks

Clark Ozanne
  • 96
  • 2
  • Thanks Clark - definitely an option, but I was trying to support IE9. It's not that I can't use flexbox, it's just that I remember doing this 100% height stuff years ago, and it worked okay, now it's not, so I'm wondering what I'm missing. – Stephen Starzyk Mar 04 '16 at 15:13
0

I've decided to do a combination of faux columns to get the first and third columns background colors, and then an absolute positioned second column that I can stretch full height using top: 0, bottom: 0.

If anyone can still solve this problem, I'd love to hear how it's done!

Stephen Starzyk
  • 45
  • 6