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

Ответ 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>