Question

我有3 <div> s如下。在<div>中的一个具有面板栏，因此其高度可以根据每个面板栏的内容而增加。现在我想根据具有面板栏的<div>的高度来增加其他两个div的高度。我怎样才能做到这一点？

<div class="leftdiv">

</div>

<div class="maindiv">

 //Panel bar is inside this div.

</div>

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

＆＃34; leftdiv＆＃34;和＆＃34; rightdiv＆＃34;高度应该根据＆＃34; maindiv＆＃34;高度???

Answer 1

您也可以使用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;
}

Answer 2

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%;
}

Answer 3

使用bootstrap（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>

Answer 4

您可以使用JavaScript来实现结果：

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

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

完整的示例和演示在这里： http://jsfiddle.net/pLmp1zpr/

Answer 5

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

HTML：根据其他div的高度自动增加高度

5 个答案: