Css - Как сделать высоту двух правых divs равными высоте левых divs

У меня есть сайт, который делится на два класса: справа и слева. У левых было 3 коробки, а справа - один. Коробка на правой высоте будет растягиваться или сжиматься так же, как сумма высоты левых полей. Я добавил еще одну коробку под полем справа, и теперь я хочу получить тот же эффект с двумя ящиками (сумма высоты двух прямоугольников справа должна всегда равняться сумме высоты трех полей слева Вот старый код, который работал с одним полем справа:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
</div>

И вот css:

.right{ float: right; display: inline; width:404px; position:relative; }
.boxx { margin-top:11px;  }
.boxx:first-child { margin-top:0;  }
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7;
  font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px; }
.details-history .boxx-content { padding: 0 0 0 0!important; position:absolute; 
   left:0; right:0; bottom:0; top:22px; }

Вот новый код:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
    <div class="boxx details-coursework">
        <div class="boxx-content custom-scroll">
            Box content goes here
        </div>
    </div>
</div>

Я уже несколько часов пытался написать css, чтобы сделать эту работу, но я не могу понять, что это правильно. Я думаю, что трюк имеет какое-то отношение к принятию "позиции: абсолютный"; из истории .details-history и помещает его в новый класс, называемый деталями-курсовой работой, но я не могу точно определить, что делать.

Ответ 1

Только так я вижу, что это работает без JS - это установить высоты для всех элементов

HTML

<div class="wrapper">
    <div class="left">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="right">
        <div class="one"></div>
    </div>
</div>

CSS

.left {
    width : 50%;
    height : 1000px;
    background : rgba(0,0,200,0.1);
    float : left;
}

.right {
    width : 50%;
    height : 1000px;
    background : rgba(200,0,0,0.1);
    float : right;
}

.left div {
    margin : auto;
    margin-top : 20px;
    width : 90%;
    height : 100px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

.right .one {
    margin : 20px auto;
    width : 90%;
    height : 344px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

Посмотрите Fiddle

Ответ 2

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

<div class="container">
    <div class="right">
        Whatever Content You Want
    </div>
    <div class="left">
        Whatever Content You Want
    </div>
    <div class="clear"></div>
</div>

.right {
    float:right;
    width:404px;
 }
.left { margin-right:404px; }
.clear { clear:both; } /* Or another clearing method */

Это создаст то, что у вас есть для столбцов внутри контейнера, который высок как самый высокий элемент. То, что вы тогда сделаете, это положить backgound-image в элемент .container, который имеет 404px-графику какого-то типа только с правой стороны. Это будет выглядеть так, как будто правая сторона выглядит так, как если бы она была такой же высокой, как у левой стороны, но без нее она была настолько высокой.

Ответ 3

Я использовал какую-то задачу. В моем примере есть два поля: слева и справа. Правильный квадрат должен автоматически регулировать его высоту в соответствии с высотой левого окна (что может быть произвольным). В правом поле есть много прокручиваемого текста.

  #container {
    width: 200px;
  }

  #left-positioner-parent {
    position: relative;
    /* Width of the left box relative to #container.
        Could be in pixels too. */
    width: 50%;
  }

  /* Contained style to exclude use of calc()
      with border width and height in #right-box */
  #left-box {
    border: 15px solid red;
  }

  #right-box {
    position: absolute;
    /* To exclude use of calc() */
    box-sizing: border-box;
    left: 100%;
    width: 100%;
    top: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: 5px solid black;
  }

  #right-content {
    /* No need of styling for this example */
  }

<!-- A container for useful example width -->
<div id="container">

  <!-- A different div for the left content is to allow
    the left div to have borders without using CSS calc()
    and border width and height in right div style. -->
  <div id="left-positioner-parent">

    <div id="left-box">Left<br>block of text.</div>

    <div id="right-box">
      <!-- Some long scrollable content -->
      <div id="right-content">Right<br>block<br>of<br>text<br>with<br>multiple<br>lines.</div>
    </div>
  </div>
</div>