CSS height:100% not working

Question

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?

Hieght 100% in pure css don't think can be done. The simple way would be to assign height value in pixel for the div, both will be same. or use javascript, if content is variable and you want them to be same size — csaw, May 16 '15 at 11:42
Can you explain for what reason you need the inner container with class `content`? Both elements with the class `td` already have the same height. — insertusernamehere, May 16 '15 at 11:54
The content item represents a visual component that I have. Effectively all I want to achieve is to have two divs next to each other, of the same height. No need for them to be inside a td - that was just me trying to achieve the desired effect. — Tom G, May 16 '15 at 12:07

Rick Hitchcock · Accepted Answer · 2015-05-16T12:02:23.987

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>

Perfect! Thanks. Out of interest - why is overflow: auto needed? i.e. why does this trick work? — Tom G, May 16 '15 at 12:02
Don't think I could explain it better than @BoltClock did here: http://stackoverflow.com/questions/12783064/why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t/12783114#12783114 — Rick Hitchcock, May 16 '15 at 12:09
@F.Müller, you're right. Your clearfix answer may be a better solution. — Rick Hitchcock, May 16 '15 at 13:18
The clearfix solution doesn't work for me. It just sets the background color on the td, not on the content. — Tom G, May 16 '15 at 21:09

score 2 · Answer 2 · answered May 16 '15 at 13:20

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

F. Müller · Answer 3 · 2015-05-16T13:16:19.640

1

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/

edited May 16 '15 at 13:16

answered May 16 '15 at 11:42

F. Müller

3,969
8
38
49

If at all this would work, it'd have to be .tr { ... }, not tr { ... }. – connexo May 16 '15 at 11:43
I was just editing the answer - I was not finished with it. I want to add js fiddle snipplet as well. But you are right ofcourse. – F. Müller May 16 '15 at 11:44
I've added the height:100% to .tr in my question as you suggested, but it unfortunately seems to have no effect? – Tom G May 16 '15 at 11:50
It must - I have just coppied your code into jsfiddle and it worked. Can you say me what does not work - maybe provide an image? – F. Müller May 16 '15 at 11:54
@F.Müller is your jsfiddle finished? I'm looking at it using Chrome, but the result looks identical to what I have (i.e. the right div is much smaller than the left). – Tom G May 16 '15 at 11:55

score 1 · Answer 4 · answered May 16 '15 at 11:47

1

.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>

answered May 16 '15 at 11:47

USER10

939
11
28

In my browser (Chrome) the right div in your example is now taller than the left? – Tom G May 16 '15 at 11:51
Oh, I see - full screen it does for me too. Problem is, the height: 50% has affected the height of the left div too. I'm only looking to have the right one match the height of the left. – Tom G May 16 '15 at 12:10
@TomG : yeah thanks .. now i check that issue... use the `overflow:auto` on `.content ` div.... user @Rick Hitchcock said Correctly :-) – USER10 May 16 '15 at 12:16

score 0 · Answer 5 · answered May 16 '15 at 11:37

0

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

height:100%;

to body and html

answered May 16 '15 at 11:37

Victor Radu

2,262
1
12
18

You mean, add this to my css: html, body { height: 100%; } – Tom G May 16 '15 at 11:39
I've just edited my code snipped above. Didn't seem to help unfortunately. Did I misunderstand? – Tom G May 16 '15 at 11:41
you are forgetting the .table class, that needs 100% too; as I said: the parent of an element that has height in percent needs to have a height set. If that height is also set in percent it goes on until you hit the html element, that youd then have window as parent and window always has a set height – Victor Radu May 16 '15 at 11:43
The problem with setting .table to 100% is that it also affects height of the bigger div. I just want the smaller div to be the same height as the bigger one. Is this possible, without affecting the bigger div? – Tom G May 16 '15 at 11:48

CSS height:100% not working

5 Answers5