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

Question

我有一个分为两类的网站：右和左。 左边有3个盒子，右边有1个盒子。 右侧高度的框将拉伸或缩小为与左侧框的高度之和相同。 我在右侧的框下方添加了另一个框，现在我希望两个框具有相同的效果（右侧的两个框的高度之和应始终等于左侧三个框的高度之和。这是旧的代码，用于右侧的一个框：

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

这将为容器中与最高元素一样高的列创建所需的内容。 然后，您需要做的是在.container元素上放置一个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;
}

看看这个小提琴

Answer 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'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>