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

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

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

Ответы

Ответ 1

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

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

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

Ответ 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 в позицию: относительная, а затем установка одного из внутренних divs в положение абсолютного позволяет другому, "не-стилизованному" 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, но у него есть некоторые проблемы с поддержкой браузера.

Ответ 3

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

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

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

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

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

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

Ответ 4

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

faux columns - использование повторяющегося фонового изображения для контейнера div для создания внешнего вида равной высоты
с использованием таблицы
с помощью javascript для регулировки высоты div
с помощью javascript для добавления поддержки css в несовместимые браузеры

Ответ 5

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

<!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>

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

Я наткнулся на эту проблему несколько раз на этой неделе, и эта тема была самой близкой, я пришел к поиску конкретного ответа. Это расширение на ответ @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;
}

Ответ 10

Это немного выходит за рамки, но у меня неприятное решение 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');
        });
    });
});