Как сделать два div'ов рядом друг с другом одинаковой высоты?

Итак, я написал веб-приложение, в котором есть три div's. Один для заголовка под тем, который находится слева, с меню и рядом с тем, в котором будет загружен контент.Как сделать два div'ов рядом друг с другом одинаковой высоты?

Так что я не хочу устанавливать статическую ширину, а содержание изменяет длину. Я пробовал с overflow:auto , но это не сработало.

CSS:

body { 
    margin: 0; 
    padding:0; 
    height:100%; 
} 

.area-header { 
    height:40px; 
    background-color:#71A4C3; 
    margin-bottom: 20px; 
    margin-left:20px; 
    margin-right:20px; 
} 

.area-menu { 
    width:300px; 
    margin-left:20px; 
    background-color:#8BC6EA; 
    display:inline-block; 
    margin-bottom:auto; 
    padding-bottom:100%; 
    height:100%; 
} 

.area-content { 
    display:inline-block; 
    position:absolute; 
    margin-right:20px; 
    margin-left:20px; 
}

HTML:

<body> 
    <div id="area-header" class="area-header"> 
     <h2>A Web Application!</h2> 
    </div> 

     <div id="area-menu" class="area-menu"> 
      <ul id="menu"> 
       @foreach (WebApplicationWithSqlAndJS.Models.MenuItem item in Model) 
       { 
        <li id="menu-item"><a href="@item.Target" onclick="return false">@item.Title</a></li> 
       } 
      </ul> 
     </div> 

     <div id="area-content" class="area-content"></div> 

</body>

источник

2015-03-13 Joh

Когда вы говорите 'длину', вы имеете в виду высоту? –

Да, извините, исправил! – Joh

Возможный дубликат [Как создать столбцы равной высоты в чистом CSS] (http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css) – Turnip

Вам просто нужно добавить родительский div в divs, которые вы хотите иметь одну и ту же высоту.

родительского DIV:

overflow: hidden;

ребенок ДИВ:

float: left; padding-bottom: 500em; margin-bottom: -500em;

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

https://stackoverflow.com/a/1205485/2851845


 
body 
 
{ 
 
    margin: 0; 
 
} 
 

 
.area-header 
 
{ 
 
    height:40px; 
 
    background-color:#71A4C3; 
 
    margin-bottom: 20px; 
 
    margin-left:20px; 
 
    margin-right:20px; 
 
} 
 

 
#area-wrapper 
 
{ 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.area-menu, .area-content 
 
{ 
 
    float:left; 
 
    padding-bottom: 500em; 
 
    margin-bottom: -500em; 
 
} 
 

 
.area-menu 
 
{ 
 
    width: 200px; 
 
    background-color:#8BC6EA; 
 
} 
 

 
.area-content 
 
{ 
 
    width: 400px; 
 
    background-color: LightSlateGrey; 
 
}

<body> 
 
    <div id="area-header" class="area-header"> 
 
     <h2>A Web Application!</h2> 
 
    </div> 
 
    <div id="area-wrapper"> 
 
     <div id="area-menu" class="area-menu"> 
 
      <ul id="menu"> 
 
       <li id="menu-item"><a href="#" onclick="return false">@item.Title</a></li> 
 
      </ul> 
 
     </div> 
 
     <div id="area-content" class="area-content"> 
 
      <div style="height:200px;background:red;"></div> 
 
     </div> 
 
    </div> 
 
</body>

источник

2015-03-13 13:25:35

спасибо, что это именно то, что я искал! – Joh

Вы можете установить высоту "область-контента" ДИВ же, что "область-контента" DIV:

 <script> 
     $(document).ready(function(){ 
       heightToSet=$("#area-menu").height(); 
       $("#area-content").height(heightToSet); 
     }); 
     </script>

источник

2015-03-13 13:18:55

Если вы имеете дело с динамическим контентом или изображениями, было бы лучше, если бы мы использовали window.load вместо document.ready. В некоторых случаях использование document.ready, 0 будет возвращено как высота элемента, что сделает другой элемент невидимым. –

Оба предложения по какой-либо причине не влияют на меню или длину содержимого – Joh

Также удалите нижнюю часть: 100%; высота: 100%; из .area-menu class –

Как сделать два div'ов рядом друг с другом одинаковой высоты?

ответ

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