HTML / CSS установить div для высоты родного брата

Question

У меня есть 2 div в третьем. Один из содержащихся в нем div всплыл влево, другой всплыл вправо. Я бы хотел, чтобы 2 родных брата всегда были на одной высоте, но у меня проблема с этим. Пока что я только просматриваю страницу в Firefox и решил, что буду беспокоиться о любых кросс-браузерных проблемах после того, как она заработает хотя бы в одном браузере.

Вот разметка:

<div id="main-container" class="border clearfix">
    <div id="left-div" class="border">
        ...
    </div>
    <div id="right-div" class="border">
        ...
    </div>
</div>

Вот CSS:

#main-container     { position: relative;                             min-height: 500px; }
    #left-div       { position: relative; float: left;  width: 700px; min-height: inherit; }
    #right-div      { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }

.clearfix:after     { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix           { display: inline-block; _height: 1%; clear: both; }
.clearfix           { display: block; clear: both; }
.border             { border: solid 1px #000; }

Если содержимое в #left-div длиннее 500px, #right-div не расширяется для соответствия. В примере, который я попробовал, Firefox сказал, что вычисленная высота стиля #main-container была 804px, вычисленная высота стиля #left-div была 800px, а вычисленная высота стиля #right-div была 586.2px , поскольку он расширился, чтобы соответствовать своему собственному контенту.

Я понимаю, что могу ошибаться, и если это повторяющиеся вопросы, то я прошу прощения, но я не совсем знал, что искать.

Answer 1

Я могу напрячь свой мозг, сколько захочу, но я думаю, что это действительно может быть решено только с помощью поведения таблицы, то есть с помощью <table> s (если вам нужно быть IE6 и IE7 совместимым ) или display: table / table-row / table-cell (что фактически одно и то же, но не смущает вас перед вашими сверстниками, потому что столы злые.;).

Я бы пошел за столом.

Не стесняйтесь доказать, что я не прав, и опубликуйте разумное решение CSS, я был бы рад!

Answer 2

Если вы знаете, какой из внутренних элементов div вы хотите установить высоту макета страницы, вы можете сделать что-то вроде этого: http://codepen.io/anon/pen/vOEepW

<div class="container">
  <div class="secondary-content">
    <div class="content-inner">
    </div>
  </div>
  <div class="main-content">
  </div>
</div>

Установка содержащего элемента div в положение: относительный, а затем установка одного из внутренних элементов div в положение абсолютного позволяет другому «нестилированному» элементу div эффективно контролировать высоту обоих.

.container {
  position: relative;
}
.main-content {
  width: 80%;
  margin-left: 20%;
  height: 300px;
  background-color: red;
}
.secondary-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  overflow-y: scroll;
}

Это также возможно, возможно, проще с помощью flexbox, но у него есть некоторые проблемы с поддержкой браузера.

Answer 3

Первое, что вы должны спросить себя: зачем вам они должны быть на одной высоте? Это потому что:

1. Вы хотите, чтобы фон был одинакового размера?
2. Средняя граница будет такой же высоты?
3. Или в нижней части есть какой-то контент, который должен отображаться в линейке с нижней частью другого div?

1) Если вы хотите, чтобы фон был одинакового размера, то я советую вам стилизовать родительский div в стиле CSS, а в худшем случае - отредактировать фоновое изображение так, чтобы оно подходило. С CSS2 вы можете легко расположить фон

{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
} 

2) Всякий раз, когда я натыкаюсь на вашу проблему, мне нужно, чтобы центральная граница была одинаковой высоты. Решение простое - примените стиль границы к DIV, который будет самым длинным.

3) Объедините оба контента в третий DIV, если вы не можете, тогда вам понадобится JavaScript. ИЛИ, как сказал Пекка - используйте display: table, если вас не волнует IE.

Answer 4

Я думаю, у вас есть следующие варианты:

• искусственные столбцы - использование повторяющегося фонового изображения для контейнера div для создания вида равной высоты
• с использованием таблицы
• с использованием JavaScript для настройки высоты div
• использование JavaScript для добавления поддержки CSS в несовместимые браузеры

Answer 5

Я сталкивался с этой проблемой несколько раз на этой неделе, и эта тема была наиболее близкой к тому, чтобы найти конкретный ответ.Это расширение ответа @ Pekka для тех, кому нужно немного больше, я определенно сделал.

jsFiddle

пример html:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">
            Lorem ipsum dolor sit amet, at assum gubergren his, 
            ex iudicabit dissentiunt intellegebat has. Ne odio detraxit
            instructior vim. Fugit velit consetetur an eos. 
            Ea suas veri mnesarchum mel.
        </div>                
    </div>
</div>

пример css:

.view-table
{
    display:table;
    width:100%;
}
.view-row
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;

}
.view-name 
{
    text-align:right;
    background-color: lightblue;
}
.view-type
{
    background-color: pink;
}

Answer 6

Это позволит высоте правого элемента всегда быть равной высоте левого, поскольку левый динамически увеличивается в зависимости от содержимого, но правое никогда не будет увеличиваться больше минимальной высоты, если у левого содержимого меньше содержимого, что может быть приемлемо для вас:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Matching Size Divs</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style>
    #main-container { position:relative; min-height:500px; }    
    #left-div { width:700px; min-height:500px; }      
    #right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }    
 </style>
</head>
<body>
    <div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
        ...
    </div> 
    <div id="right-div" class="border"> 
        ... 
    </div> 
</div>
</body>
</html>

Answer 7

Это немного выходит за рамки, но у меня есть неприятное решение Javascript.

HTML:

<div id="element-without-height" copy-size="#element-with-height"></div>
<div id="element-with-height"></div>

Javascript (с использованием jQuery):

$(document).ready(function() {
    $(window).on('resize', function() {
        $('[copy-size]').each(function() {
            var copyEl = $($(this).attr('copy-size'));
            var targetEl = $(this);
            targetEl.width(copyEl.width() + 'px');
            targetEl.height(copyEl.height() + 'px');
        });
    });
});

Answer 8

Они будут складываться, если недостаточно места.Убедитесь, что div, содержащий оба, достаточно широк, чтобы иметь их обоих ... если вы уберете их ширину для тестирования, держу пари, это сработает.

Answer 9

Я думаю, что это можно реализовать, указав высоту div s (т.е. left-div & right-div) равной 100%. Таким образом, они будут принимать высоту контейнера div, и если высота не указана для контейнера div с помощью html / css, то контейнер div также расширяется для размещения его дочерних элементов. Я знаю, что уже поздно, но это может спасти сценарий.

Answer 10

Чтобы сделать это с HTML и CSS с помощью divs, вам нужно будет использовать JavaScript, чтобы проверить их высоту, а затем изменить один на соответствующий.

Если вы не хотите использовать JavaScript, и вашСайт имеет особый дизайн, в третьем элементе div вы можете задать ему повторяющееся фоновое изображение, которое будет расширяться, как это делает один из двух элементов div.Например, скажем, у двух ваших div-элементов синий фон, а у третьего, содержащего div, серый фон.Удалите синий фон и создайте изображение, которое можно повторить, используя синий и серый, и поместите это изображение для третьего деления.Таким образом, при расширении будет казаться, что оба div тоже одинаковы.