將一個 div 固定到列的頂部，將另一個 div 固定到底部，兩個不重疊

Question

我有一個有兩列的表。 右欄將包含一些可變數量的內容。 左列將包含一些應該固定在列頂部的內容和一些應該固定在底部的內容。 當右列中的內容大於左列時，這很好。 但是當右列較小時，左側的頂部和底部內容最終會重疊。 我怎樣才能防止這種情況發生？

實際代碼在 Typescript 和 CSS 中，但這與我正在做的類似。

.leftCol {
  padding: 20px;
  position: relative;
  vertical-align: top;
  height: 100%;
}

.rightCol {
  padding: 20px;
  position: relative;
}


.bottomDiv {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

.topDiv {
  right: 0;
}

<table>
    <tr>
        <td class="leftCol">
            <div class="topDiv">
            top<br>
            top<br>
            top<br>
            </div>
            <div class="bottomDiv">
            bottom <br>
            bottom <br>
            bottom <br>
            </div>
        </td>
        <td class="rightCol">
            <div>
            random <br>
            random <br>
            random <br>
            random <br>
            random <br>
            random <br>
            random <br>
            random <br>
            </div>
        </td>
    </tr>
</table>

這是一個小提琴演示當事情工作時： http://jsfiddle.net/uqzk5ncy/3/

事情破裂時擺弄：http://jsfiddle.net/uqzk5ncy/2/

使用 top: 0 作為頂部 div 對我不起作用。 我會很感激任何反饋。

可能是現有問題的副本，但我能從 Google 找到的唯一問題是將一個 div 固定到列的底部或頂部的問題。

Answer 1

我不會使用table ，而是使用flexbox 。

這是一個右列包含大量內容的示例。

 .container { display: flex; }.leftCol, .rightCol { display: flex; flex-wrap: wrap; padding: 20px; }.bottomDiv { width: 100%; align-self: flex-end; }.topDiv { width: 100%; align-self: flex-start; }

 <div class="container"> <div class="leftCol"> <div class="topDiv"> top<br> top <br> top <br> </div> <div class="bottomDiv"> bottom <br> bottom <br> bottom <br> </div> </div> <div class="rightCol"> <div> random <br> random <br> random <br> random <br> random <br> random <br> random <br> random <br> </div> </div> </div>

這是一個右列幾乎沒有任何內容的示例。

 .container { display: flex; }.leftCol, .rightCol { display: flex; flex-wrap: wrap; padding: 20px; }.bottomDiv { width: 100%; align-self: flex-end; }.topDiv { width: 100%; align-self: flex-start; }

 <div class="container"> <div class="leftCol"> <div class="topDiv"> top<br> top <br> top <br> </div> <div class="bottomDiv"> bottom <br> bottom <br> bottom <br> </div> </div> <div class="rightCol"> <div> random <br> random </div> </div> </div>

Answer 2

首先，我建議不要為此使用表格。 使用 div。

為防止溢出，您可以使用：

overflow: none

然后使用 CSS 屬性（例如高度和寬度）設置所需的大小，然后使用 position 屬性：

position: absolute