HTML: авто увеличение высоты на основе другой высоты div

У меня есть 3 <div> s следующим образом. В этом случае один из <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

попробуйте использовать свойство 'display: table-cell' для вашего div. –

Пожалуйста, не могли бы вы предоставить стили для leftdiv, maindiv и т. Д.? – user3589536

Вы также можете сделать это с помощью CSS и позиционирование дивы абсолютно или относительно, с полями для центральный элемент.

Fiddle: 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

Вы можете использовать JavaScript для достижения результата:

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

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

Полный пример и демо здесь: http://jsfiddle.net/pLmp1zpr/

источник

2014-12-11 11:45:38

Используйте Flexbox, чтобы сделать это.

Оберните свои divs в контейнер.

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

ответ

Смежные вопросы