将一个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>

下面是一个Fiddle演示如何工作：http://jsfiddle.net/uqzk5ncy/3/

事情破裂时的手忙脚乱：http://jsfiddle.net/uqzk5ncy/2/

使用top:0作为topdiv对我不起作用。如果有任何反馈，我将不胜感激。

可能是现有问题的重复，但我从谷歌上唯一能找到的是将一个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: absolute