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>