CODEWITHSUNDEEP
csshtml
Lior
Lior

Reputation: 6051

div height depends another div height

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.

Upvotes: 0

Views: 10455

Answers (8)

Pazhukh Yaroslav
Pazhukh Yaroslav

Reputation: 11

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/

Upvotes: 1

Weafs.py
Weafs.py

Reputation: 22998

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>

Upvotes: 0

User
User

Reputation: 4221

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.

Upvotes: 1

Alien
Alien

Reputation: 3678

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

Upvotes: 2

EternalHour
EternalHour

Reputation: 8661

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

Upvotes: 0

Vucko
Vucko

Reputation: 20844

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

Upvotes: 0

Sudhir kumar
Sudhir kumar

Reputation: 549

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

Upvotes: 0

user3467273
user3467273

Reputation:

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.

Upvotes: 0

Related Questions