CODEWITHSUNDEEP
css
Tom G
Tom G

Reputation: 2045

CSS height:100% not working

I have two divs next to each other. Usually one will have more content in it than the other. What I'd like to achieve is that they are visibly the same height.

I've tried to achieve it using display:table-cell; and height:100%; but no luck.

.content {
  background-color: tomato;
  margin: 10px;
  border: 3px solid black;
  height: 100%; /* this seems to be being ignored */
}

.table {
  display: table;
  vertical-align: middle;
  /*height:100%; if I do this it will also affect height of bigger div */
}

.tr {
  display: table-row;
  vertical-align: inherit;
  height: 100%;
}

.td {
  display: table-cell;
  vertical-align: inherit;
  width: 50%;
  height: 100%;
}

html, body {
  height: 100%;
}
<div class="table">
  <div class="tr">
    <div class="td">
      <div class="content">Lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots of content.</div>
    </div>
    <div class="td">
      <div class="content">I wish I was the same height as my fellow div</div>
    </div>
  </div>
</div>

Any suggestions?

Upvotes: 1

Views: 743

Answers (5)

insertusernamehere
insertusernamehere

Reputation: 23580

I hope I got you right. But the solutions seem to complicated to me. Actually you can achieve what you want by using this simple markup and CSS. Works in Safari, Chrome, Firefox and should work in IE as well:

HTML

<div class="content">Really long content</div>
<div class="content">Short content</div>

CSS

.content {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

Demo

Try before buy

Upvotes: 2

F. M&#252;ller
F. M&#252;ller

Reputation: 4062

Edit:

Removed previous answer as it seem to only work in ff.

Update:
This snipplet should work for all major browsers: https://jsfiddle.net/4k4653yL/3/

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Add overflow: auto to .content,
and remove height: 100% from .td.

Assuming you want .content's text to be vertically centered, you'll need to add an additional element to .content. These styles will work for it:

.content > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


.content {
  background-color: tomato;
  margin: 10px;
  border: 3px solid black;
  height: 100%;
  overflow: auto;
}

.content > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.table {
  display: table;
  vertical-align: middle;
}

.tr {
  display: table-row;
  vertical-align: inherit;
  height: 100%;
}

.td {
  display: table-cell;
  vertical-align: inherit;
  width: 50%;
}

html, body {
  height: 100%;
}
<div class="table">
  <div class="tr">
    <div class="td">
      <div class="content"><div>Lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots of content.</div></div>
    </div>
    <div class="td">
      <div class="content"><div>I wish I was the same height as my fellow div</div></div>
    </div>
  </div>
</div>

Upvotes: 3

USER10
USER10

Reputation: 974

.content {
  background-color: tomato;
  margin: 10px;
  border: 3px solid black;
  height: 100%; /* this seems to be being ignored */
}

.table {
  display: table;
  vertical-align: middle;
height:50%;
}

.tr {
  display: table-row;
  vertical-align: inherit;
  height:100%;
}

.td {
  display: table-cell;
  vertical-align: inherit;
  width: 50%;
}

html, body {
  height: 100%;
}
<div class="table">
  <div class="tr">
    <div class="td">
      <div class="content">Lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots of content.</div>
    </div>
    <div class="td">
      <div class="content">I wish I was the same height as my fellow div</div>
    </div>
  </div>
</div>

Upvotes: 1

Victor Radu
Victor Radu

Reputation: 2302

when you give a size in percent the parent needs to have that size set so add 

height:100%;

to body and html

Upvotes: 0

Related Questions