Question

我有一个分为两个类的站点：右侧和左侧。左边有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之外，将它放入一个名为details-coursework的新课程中，但我无法弄明白该做什么。

Answer 1

你必须假装它。你根本无法用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图形。这会让它看起来像右侧看起来好像它的左侧一样高，但没有它实际上那么高。

Answer 2

只有这样我才能看到没有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

Answer 3

我使用了某种任务。在我的例子中，有两个框：左和右。右侧框应根据左框的高度（可以是任意的）自动调整其高度。右侧框中有很多可滚动的文本。

＆＃13;

  #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 */
  }

＆＃13;

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

＆＃13;

css - 如何使两个右div的高度等于左div的高度

3 个答案:

HTML

CSS