How do I get this div to height 100%? (flexbox on container)

Question

I have a problem with a div that I can't get to height:100%, I have tried to use !important but that didn't help. I guess it has some thing to do with my flexbox on my container .row?

It is the div with the class `the-list I want to get to 100%.

JSFiddle: https://jsfiddle.net/e488j5sp/

HTML:

<div class="row equal-height"> <!-- START BS ROW -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
    <div class="col-md-3 zeropadding-right"> <!-- START BS COL-MD-4 -->
        <div class="singlepage-list-style"> <!-- START SINGLEPAGE-LIST-STYLE -->
            <div class="list-header"> <!-- START LISTE-HEADER -->
                <h1>Quick info</h1>
            </div> <!-- END LIST-HEADER -->
            <div class="the-list"> <!-- START THE-LISTE -->
            <img src="http://placehold.it/150x100">
            </div> <!-- END THE-LIST -->
        </div>
    </div> <!-- END BS COLD-MD-4 -->
    <div class="col-md-7 zeropadding-left"> <!-- START BS COL-MD-6 -->
        <div class="singleheader-content-style"> <!-- START SINGLEPAGE-CONTENT-STYLE -->
            <h1>Property description</h1>
            <img src="http://placehold.it/350x150">
        </div> <!-- END SINGLEHEADER-CONTENT-STYLE -->
    </div> <!-- END BS COL-MD-6 -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
</div> <!-- END BS ROW -->

CSS:

/***** INFO & CONTENT HEIGHT CONTROLER *****/

.equal-height, .equal-height > div[class*='col-'] {  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex:1 0 auto;
  }

.zeropadding-right {
    padding-right:0px;
}

/***** SINGLEHEADER CONTENT AREA STYLING *****/

.singleheader-content-style {
    background-color:#fff;
    border-right: 1px solid #9c9c9c;
    padding:20px;
    font-family: 'Open Sans', sans-serif;
    width:100%;
}

.singleheader-content-style h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change boostraps default */
    color:#de1b1b;
}

/***** SINGLEHEADER LIST AREA STYLING *****/

.singlepage-list-style {
    background-color:#fff;
    border-left: 1px solid #9c9c9c;
    padding:20px;
    font-family: 'Open Sans', sans-serif;
    width:100%;
    font-size:16px;
}

.singlepage-list-style ul li {
    list-style-type:none;
}

.singlepage-list-style ul {
    padding-left:20px;
}

.the-list {
    border-right: 1px solid #9c9c9c;
    width:100%;
}

.list-header {
    width:100%;
}

.list-header h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change boostraps default */
    color:#de1b1b;
}

Any ideas?

EDIT: Some people have suggested that to solve this issue I need to set height:100% to all parent element. So I have tried to do that. But the problem is that when I do so the div elements with the classes singlepage-list-style and singleheader-content-style end up with different heights (307px and 267px). This was the purpose of "flex" in the equal-height class, to give those two elements the same height (and at the same time adjust height to its content), in this case both should end up with the height 307px. And that does no longer work when height:100% is added to all parent elements. For more details see the conversations in the comments for the answers below. Here is jsfiddle: https://jsfiddle.net/5s9mmdtx/

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

Either you make sure that all parent tags are with height: 100% attribute or you'll end up filling only 100% of the current tag.

You can use height: 100vh instead, using your body height as a max height.

Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height.

You can see more detailed information here.

edited May 23 '17 at 11:48

Community

1
1

answered Aug 21 '15 at 01:59

George

6,886
3
44
56

Hi, I can't get it to work. If I add 100% height to the parent element, the flexbox loses its function and the columns end up at different heights: https://jsfiddle.net/aLjj4fyz/ – Alex Aug 21 '15 at 02:22
Also see comments on the answer above yours :) – Alex Aug 21 '15 at 02:48

How do I get this div to height 100%? (flexbox on container)

1 Answers1