div height depends another div height

Question

I have two divs that one of them is dependant on the other one.

|Second Div| |First Div|
|          | |         |
|          | |         |
|          | |         |

The height of the first div defined:

height:auto;

My problem is how to define the second div height so it will be like the first.

use jQuery to get the height of another div. – Bhojendra Rauniyar Nov 29 '14 at 12:00 — Bhojendra Rauniyar, Nov 29 '14 at 12:00
@Bhojendra-C-LinkNepal Can't I do it just with css? – Lior Nov 29 '14 at 12:04 — Lior, Nov 29 '14 at 12:04
there is a pure css solution , check out my answer. – Alien Nov 29 '14 at 12:09 — Alien, Nov 29 '14 at 12:09

Alien · Answer 1 · 2014-11-29T12:12:53.100

2

<div class="div1">first div</div>   
<div class="div2"></div>

css:

 div{display: table-cell;width: 100px;vertical-align: top}  /*display: table-cell;*/
.div1{height:auto; background:red;}
.div2{background:green;}

working jsFiddle http://jsfiddle.net/L54xz1h9/4/

edited Nov 29 '14 at 12:12

answered Nov 29 '14 at 12:04

Alien

3,658
1
16
33

I think your answer is correct! I have a small doubt why is it not showing any result if we first div from ur code? – Sudhir kumar Nov 29 '14 at 12:18

score 1 · Answer 2 · answered Nov 29 '14 at 12:24

You can use java script to do so.

<div id="firstDiv">
   <!--Your contents--> 
</div>
<div id="secondDiv"> 
   <!--Your contents--> 
</div>

<script type="text/javascript">        
    document.getElementById("secondDiv").style.height = (document.getElementById("firstDiv").clientHeight - 10) + "px";
</script>

It is tested.

score 1 · Answer 3 · answered Oct 28 '17 at 08:18

Best solution is flexbox, and your elements will be the same height:

HTML

<div class="flex-container">
  <div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="flex-item"></div>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
    padding: 10px
}

jsFiddle https://jsfiddle.net/242wro9e/

score 0 · Answer 4 · answered Nov 29 '14 at 12:02

0

Set property display:table-cell; for both div then height of your div adjust automatically so the second div height so it will be like the first.

answered Nov 29 '14 at 12:02

score 0 · Answer 5 · answered Nov 29 '14 at 12:03

0

As Bhojendra - C-Link Nepal has already mentioned use jquery to get the height of first div!

Here is some tutorial for you:-

click here

Check the examples at the bottom

answered Nov 29 '14 at 12:03

Sudhir kumar

549
2
8
31

score 0 · Accepted Answer · answered Nov 29 '14 at 12:04

0

Use display:table/table-cell:

.parent{
  display:table;
  width:600px; /* some value*/
  border: 1px solid black;
}

.left{
  display:table-cell;
  height: 500px; /* some value*/
  background: red;
}

.right{
  display:table-cell;
  background: blue;
}

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

JSFiddle

answered Nov 29 '14 at 12:04

Vucko

20,555
10
56
107

When I omit the height property from the right div, it isn't shown at all. Actually, the right div doesn't have any value inside it but a border, which is not shown when I omit the height. – Lior Nov 29 '14 at 12:13
Did you put a `display:table` parent? – Vucko Nov 29 '14 at 12:14
When I put that property on the parent div, it ignores the width property of the children. – Lior Nov 29 '14 at 12:17
http://jsfiddle.net/n8Lqrqvv/2/ When you uncomment the height, the lines are begin shown. – Lior Nov 29 '14 at 12:21
You have to add some `width` to the `.parent`. Also, you don't need `float` because they are rendered like `table-cells` - [JSFiddle](http://jsfiddle.net/vucko/n8Lqrqvv/3/) – Vucko Nov 29 '14 at 12:24
Ok, now it's almost fully working. There is an issue with 'margin-right' which is ignored. I assume that that is because we are acting like a table cell. I have tried to use 'cell-spacing' which also didn't work. – Lior Nov 29 '14 at 12:29
Yes, `margin` doesn't work with `table-cell` - [reference](http://stackoverflow.com/a/16398904/1763929). You can add a third `table-cell` that will simulate that `margin-right` - [JSFiddle](http://jsfiddle.net/vucko/n8Lqrqvv/4/) – Vucko Nov 29 '14 at 12:33

score 0 · Answer 7 · answered Nov 29 '14 at 12:09

0

I'm not sure if your layout will allow, but a simple solution is to put first div inside second div.

|Second Div |First Div||
|           |         ||
|           |         ||
|           |         ||

Here is a JSFiddle

answered Nov 29 '14 at 12:09

EternalHour

8,308
6
38
57

Weafs.py · Answer 8 · 2014-11-29T12:56:25.483

You can use .offsetHeight to get the height, if the element's height is set to auto. It returns the height including the padding and border, so if it exists you can remove it using try / catch statements.

var first = document.getElementById('first');
var second = document.getElementById('second');
var h = first.offsetHeight;

try {
  h -= parseInt(getComputedStyle(first).paddingTop.slice(0, -2), 10);
  h -= parseInt(getComputedStyle(first).paddingBottom.slice(0, -2), 10);
} catch (error) {
  console.log(error);
}

try {
  h -= parseInt(getComputedStyle(first).borderTopWidth.slice(0, -2), 10);
  h -= parseInt(getComputedStyle(first).borderBottomWidth.slice(0, -2), 10);
} catch (error) {
  console.log(error);
}
second.style.height = h + 'px';

#first {
  display: inline-block;
  width: 100px;
  text-align: center;
  height: auto;
  background-color: chocolate;
  vertical-align: top;
  border: 1px solid black;
  padding: 10px;
}
#second {
  display: inline-block;
  width: 100px;
  background-color: sienna;
  vertical-align: top;
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

<div id="first">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
<div id="second">Text</div>

div height depends another div height

8 Answers8

Linked