How to set height of a div element to same as another div

Question

I have two div elements same as the image bellow.

enter image description here

Div 1 : It show contents from server, so can not know the height Div 2 : It's height should be same as the height of div 1.

I have no experience in HTML (CSS), so I dont know how to do this. Please help me in this case.

Thank a lot.

possible duplicate of [How do I achieve equal height divs (positioned side by side) with HTML / CSS ?](http://stackoverflow.com/questions/1056212/how-do-i-achieve-equal-height-divs-positioned-side-by-side-with-html-css) — danielnixon, Jan 20 '15 at 04:27

score 3 · Answer 1 · answered Jan 20 '15 at 06:02

Try this: Example(http://jsfiddle.net/dzcvaxyx/)

<div id="wrapper">
<div id="one">
    <h1>DIV 1</h1>
    <h4>content</h4>
    <h4>content</h4>
    <h4>content</h4>
    <h4>content</h4>
</div>
<div id="two">
    <h1>DIV 2</h1>
</div>
</div>


#one, #two{
    width:150px;
    border:1px solid red;
    margin:10px;
    padding:10px;
}
#wrapper{
    margin:0 10px;
    display:flex;
}

Use a wrapper div. under which your div1 and div2 will have height 100%. The content of div1 will set the height which will be picked by div2. Similarly, if div2 get bigger content it autocratically stretches itself.

score 2 · Accepted Answer · answered Jan 20 '15 at 04:40

HTML

 <div class="container">  
     <div class="Div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
     Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.   
     </div>  
 </div>

CSS

.Div1, .Div2 {  
    float: none;  
    padding: 20px;  
    vertical-align: top;  
}  
.container {  
    display: table;  
}  
.Div1 {  
    width: 400px;  
    background-color: LightSlateGrey;  
    display: table-cell;  
}  
.Div2 {  
    width: 200px;  
    display: table-cell;  
    background-color: tan;  
}

Check out this : Fiddle

Both the divs will take same height irrespective of its content length.

score 1 · Answer 3 · answered Jan 20 '15 at 04:32

check the fiddle sample below

HTML

<div id="one"></div>
<div id="two"></div>

CSS

#one, #two{
    display:inline-block;
    width:150px;
    border:1px solid red;
    margin:0 10px;
    vertical-align:top;
}
#one{
    height:200px;
}

Script

$("#two").height($("#one").height());

Fiddle Demo

score 0 · Answer 4 · answered Apr 05 '21 at 18:05

use flexbox

.flexbox {      
  display: -webkit-flex;        
  display: -ms-flexbox;     
  display: flex;
  overflow: hidden;
}
.flexbox .col {
  flex: 1;
  padding: 20px;
  background:orange;
    border: 1px solid black;
}

<div class="flexbox">
  <div class="col"><h3>I ffasdfam lfisted ffasdf ac turpiasdfs egfasdfsafestas.</p></div>
  <div class="col"><p>Pefsdfsdaflledsfntesque hfsadfbitant morfsdafbi trdsfsdfissdafdsafsdafstique senesafdfasdfctus etsdaf netsdafus et malesuada fames ac turpis egestas. Vesdafsdafstibulum tsdafsdafortor quasdafsdfsm, feugidsfsdafsdat vitaedasf, ultricsdafsies esdafget, temposadfsar sitfsd amefsdat, antsdafdase.</p>
    <p>Donsdafsdafsec eu ldsfaibdsfsafero sitdsafsdf ametsdafds quadasfm egsdafestas sasfsdafemper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pesdafsdfllentesque habitsdafsdafsadant mogdffdsrbi trisasfdsdaftique sendsafsdafectussdaf sdafet sdafnetus et malasdfasfdsesuada famsdafes ac turpsafdis egestasadfs. Vestibulsadfum tosdafrtasfdor quasfdasdfasdafm, feugiat viaFdsftae, ultricies eget, temsaddfpor sit dsafamet, ante.</p>
    <p>Pellentesque hsfdfsdafabitant sdaforbi trsadfistique senectusadfs et netussdaf et malessdafuada fdsafames ac tusadfdsarpis egestas.</p>
  </div>
  <div class="col"><p>Pesdafsdafllsdafsdafentesque habisadftant mdassdafforbi trisdafsdstique senecsasdafsdafsddftus et netudasfsds et malesuada fameasfdss acsdaf tsdafsdafurpis egeasfdfstas.</p></div>
</div>

How to set height of a div element to same as another div

4 Answers4