CODEWITHSUNDEEP
csshtmlmultiple-columns
Chris
Chris

Reputation: 1707

How to make div same height as parent (displayed as table-cell)

I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.

Everything worked just fine, until...

I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.

Please see my JSFiddle: http://jsfiddle.net/bkG5A/

Any help would be greatly appreciated!

HTML 

<div class="container">
    <div class="child">
        a<br />a<br />a
    </div>
    <div class="child">
        a<br />a<br />a<br />a<br />a<br />a<br />a
    </div>
    <div class="child">
        <div class="content">
            a<br />a<br />a
        </div>
    </div>
</div>

CSS 

.container {
    display: table;
}
.child {
    width: 30px;
    background-color: red;
    display: table-cell;
    vertical-align: top;
}
.content {
    height: 100%;
    background-color: blue;
}

Upvotes: 33

Views: 136147

Answers (4)

drew7721
drew7721

Reputation: 1650

The child can only take a height if the parent has one already set. See this exaple : Vertical Scrolling 100% height

 html, body {
        height: 100%;
        margin: 0;
    }
    .header{
        height: 10%;
        background-color: #a8d6fe;
    }
    .middle {
        background-color: #eba5a3;
        min-height: 80%;
    }
    .footer {
        height: 10%;
        background-color: #faf2cc;
    }


    $(function() {
      $('a[href*="#nav-"]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 500);
            return false;
          }
        }
      });
    });
html,
body {
  height: 100%;
  margin: 0;
}
.header {
  height: 100%;
  background-color: #a8d6fe;
}
.middle {
  background-color: #eba5a3;
  min-height: 100%;
}
.footer {
  height: 100%;
  background-color: #faf2cc;
}
nav {
  position: fixed;
  top: 10px;
  left: 0px;
}
nav li {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <nav>
    <ul>
      <li>
        <a href="#nav-a">got to a</a>
      </li>
      <li>
        <a href="#nav-b">got to b</a>
      </li>
      <li>
        <a href="#nav-c">got to c</a>
      </li>
    </ul>
  </nav>
  <div class="header" id="nav-a">

  </div>
  <div class="middle" id="nav-b">

  </div>
  <div class="footer" id="nav-c">

  </div>

Upvotes: 0

reinder
reinder

Reputation: 2551

Another option is to set your child div to display: inline-block;

.content {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: blue;
}


.container {
  display: table;
}
.child {
  width: 30px;
  background-color: red;
  display: table-cell;
  vertical-align: top;
}
.content {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: blue;
}
<div class="container">
  <div class="child">
    a
    <br />a
    <br />a
  </div>
  <div class="child">
    a
    <br />a
    <br />a
    <br />a
    <br />a
    <br />a
    <br />a
  </div>
  <div class="child">
    <div class="content">
      a
      <br />a
      <br />a
    </div>
  </div>
</div>

JSFiddle Demo

Upvotes: 33

Tom Spee
Tom Spee

Reputation: 9269

You can use this CSS:

.content {
    height: 100%;
    display: inline-table;
    background-color: blue;
}

JSFiddle

Upvotes: 5

King King
King King

Reputation: 63317

You have to set the height for the parents (container and child) explicitly, here is another work-around (if you don't want to set that height explicitly):

.child {
  width: 30px;
  background-color: red;
  display: table-cell;
  vertical-align: top;
  position:relative;
}

.content {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  background-color: blue;
}

Fiddle

Upvotes: 9

Related Questions