HTML : 다른 div의 높이를 기준으로 자동 증가 높이

3은 <div>입니다. <div>에는 패널 막대가 있으므로 각 패널 막대의 내용에 따라 높이가 높아질 수 있습니다. 이제는 패널 막대가있는 <div> 높이를 기준으로 다른 두 div의 높이를 늘리고 싶습니다. 이것을 어떻게 할 수 있습니까?HTML : 다른 div의 높이를 기준으로 자동 증가 높이

<div class="leftdiv"> 

</div> 

<div class="maindiv"> 

//Panel bar is inside this div. 

</div> 

<div class="rightdiv"> 
</div>

"leftdiv"및 "rightdiv"높이는 "maindiv"높이를 기준으로 높이 야합니다 ???

출처

2014-12-11 7783

이가 '적절한'대답은 아니지만, 도움이 있는지 확인하기 위해이 링크보고 고려 : HTTP : // CSS 트릭. com/equal-height-blocks-in-rows/ – Candlejack

div에'display : table-cell' 속성을 사용하려고합니다. –

leftdiv, maindiv 등의 스타일을 제공해 주시겠습니까? – user3589536

당신은 또한 마진으로는 CSS를 사용하여 절대적 또는 상대적으로 div의 위치 할 수 중앙 항목.

바이올린 : http://jsfiddle.net/o403Ljoq/

코드 :

<div class="parentDiv"> 
<div class="leftDiv" >text</div> 
<div class="mainDiv">text<div>Something with height</div> 
<div style="height:200px;">something else with height</div></div> 
<div class="rightDiv" >text</div> 

.parentDiv 
{ 
    position:relative; 
    background-color:gray; 
} 
.leftDiv 
{ 
background-color:blue; 
position:absolute; 
left:0px; 
top:0px; 
bottom:0px; 
width:100px; 
} 
.mainDiv 
{ 
background-color:yellow; 
margin-left:100px; 
margin-right:100px; 
} 
.rightDiv 
{ 
background-color:green; 
position:absolute; 
right:0px; 
top:0px; 
bottom:0px; 
width:100px; 
}

출처

2014-12-11 12:11:51 user3589536

매우 간단하고 완벽하게 작동합니다 ... 감사합니다 !! – 7783

Demo

HTML

<div class="container"> 
    <div class="leftdiv">a</div> 
    <div class="maindiv">//Panel bar is inside<br/> this div.<br/>//Panel bar is inside<br/> this div.</div> 
    <div class="rightdiv">c</div> 
</div>

CSS

.leftdiv { 
    background:red; 
    display:table-cell; 
} 
.maindiv { 
    background:green; 
    display:table-cell; 
} 
.rightdiv { 
    background:blue; 
    display:table-cell; 
} 
.container{ 
    display:table; 
    width:100%; 
}

출처

2014-12-11 11:41:07 4dgaurav

전체 화면 모드의 예를보십시오 부트 스트랩 (row col-wrap 클래스)를 사용하여이 예를 시도

@media (min-width: 768px) { 
 

 
/* top row */ 
 
.col .well{ 
 
    margin-bottom: -99999px; 
 
    padding-bottom: 99999px; 
 
} 
 

 

 
.col-base{ 
 
    margin-top: -15px; 
 
} 
 
} 
 

 
@media (max-width: 767px) { 
 
.row.base{ 
 
    display:none; 
 
} 
 
} 
 

 

 
.col-wrap{ 
 
    overflow: hidden; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="container"> 
 

 
<div class="row col-wrap"> 
 
<div class="col-sm-4 col"> 
 
<div class="well"> 
 
<p>A </p> 
 
<p>B </p> 
 
<p>C </p> 
 
    </div> 
 
</div> 
 
    
 
<div class="col-sm-4 col"> 
 
<div class="well"> 
 
<p>MAIN CONTAINER</p> 
 
    <p>MAIN CONTAINER</p> 
 
    <p>MAIN CONTAINER</p> 
 
    <p>MAIN CONTAINER</p> 
 
    <p>MAIN CONTAINER</p> 
 
    <p>MAIN CONTAINER</p> 
 
    <p>MAIN CONTAINER</p> 
 
    <p>MAIN CONTAINER</p> 
 
</div> 
 
</div> 
 
    
 
<div class="col-sm-4 col"> 
 
<div class="well"> 
 
<p>D </p> 
 
<p>E </p> 
 

 
</div> 
 
</div> 
 
     
 
</div> 
 
    
 

 
<div class="row base col-wrap"> 
 

 
<div class="col-sm-4 col-base"><div class="well"></div></div> 
 
<div class="col-sm-4 col-base"><div class="well"></div></div> 
 
<div class="col-sm-4 col-base"><div class="well"></div></div> 
 
</div> 
 
    
 
    
 
</div>

출처

2014-12-11 11:45:10 faby

당신은 결과를 달성하기위한 자바 스크립트를 사용할 수 있습니다 :

var commonHeight = $(".maindiv").height(); 

$(".leftdiv").height(commonHeight); 
$(".rightdiv").height(commonHeight);

전체 예제 및 데모는 여기에 있습니다 : http://jsfiddle.net/pLmp1zpr/

출처

2014-12-11 11:45:38

사용 인 flexbox이 작업을 수행 할 수 있습니다.

div를 컨테이너에 넣으십시오.

HTML :

<div class="container"> 
    <div class="leftdiv"></div> 
    <div class="maindiv"></div> 
    <div class="rightdiv"></div> 
</div>

CSS :

.container{ 
    display:flex; 
    align-items:stretch; 
    flex-flow:row wrap; 
} 
.leftdiv,.rightdiv,.maindiv{ 
    flex:1 0; 
}

Here is the DEMO.

출처

2014-12-11 12:03:00 Hiral

HTML : 다른 div의 높이를 기준으로 자동 증가 높이

답변

관련 문제