带CSS的两列布局：左侧最后一个div填充剩余区域_Css_Layout

带CSS的两列布局：左侧最后一个div填充剩余区域

css layout

带CSS的两列布局：左侧最后一个div填充剩余区域,css,layout,Css,Layout,我有两列的布局。如果两列的高度相等，或者左边的列较长，则该列为。但是如果左列是，那么我有一堆空白的黑暗空间是否有CSS技巧“让页面上的最后一个框填充剩余空间” 我知道这是一个相当常见的问题，我知道一些让单个元素填充其容器的方法，但我从来没有听说过一种只让最后一个元素填充剩余空间的方法到目前为止，我的想法是使用图像创建左侧的外观，这样它就可以作为背景一直向下延伸，或者使用Javascript动态计算高度。图像并不理想，因为这会在一定程度上限制自定义，并且此页面需要尽可能轻松地进行自定义。我担心

我有两列的布局。如果两列的高度相等，或者左边的列较长，则该列为。但是如果左列是，那么我有一堆空白的黑暗空间

是否有CSS技巧“让页面上的最后一个框填充剩余空间”

我知道这是一个相当常见的问题，我知道一些让单个元素填充其容器的方法，但我从来没有听说过一种只让最后一个元素填充剩余空间的方法

到目前为止，我的想法是使用图像创建左侧的外观，这样它就可以作为背景一直向下延伸，或者使用Javascript动态计算高度。图像并不理想，因为这会在一定程度上限制自定义，并且此页面需要尽可能轻松地进行自定义。我担心在加载短页面时，使用Javascript会导致明显的“抖动”。

要将左列的最后一个元素一直向下延伸，可以使用底部带有锚的绝对定位元素：

#leftCol {
  position: absolute;
  bottom: 0px;
}

这确保了

#leftCol

始终附着在底部

要将左列上的最后一个元素一直向下延伸，可以使用底部带有锚的绝对定位元素：

#leftCol {
  position: absolute;
  bottom: 0px;
}

这确保了

#leftCol

始终附着在底部

唯一简单的方法是使用。基本上，您可以使背景图像看起来像您的专栏。

唯一简单的方法是使用。基本上，您可以使背景图像看起来像您的列。

您可以使用

最小高度：100%

作为左上一列

参见解决方案您可以使用

最小高度：100%

作为左上一栏

请参阅解决方案

简单答案，否。广泛答案，有一些变通方法，但它们可能涉及对核心html/css布局的大量修改。给我们你已经拥有的，也许有人能想出一个适合你的解决方案。HTML或CSS并不重要，因为我可以完全改变它，如果我需要的话（产品还没有发布）。所以如果有办法的话，那么我只需要一个例子。简单的答案，不。广泛的答案，有解决办法，但它们可能会涉及到对核心html/css布局的大量修改。给我们你已经拥有的，也许有人能想出一个适合你的解决方案。HTML或CSS并不重要，因为我可以完全改变它，如果我需要的话（产品还没有发布）。如果有办法的话，我只需要一个例子。不，不，你猜，你怎么知道这会起作用？你不能，因为你没有他的html/css可以看。猜测#1将失败，因为如果你绝对定位它，它将只捕捉到底部，如果你只指定底部。猜测#2将产生其他问题，因为我怀疑他的leftcol是否具有填充左侧区域的绝对高度。猜测#1-如果他希望左列一直向下，则必须指定

bottom:0px

（或10px、100px，或任何底部）。我可以使用一个框（即，只有一个#leftcol）使事情正常工作。但问题是当盒子不止一个时。想象一下两个左撇子，一个在另一个下面，你只想让第二个“伸展”到底部。除了表格之外，我不知道有什么办法。@ChristopherNadeau在两个

#leftCols

的情况下，不能同时使用相同的

id

，您应该使用，例如，

#leftCol1

和

#leftCol2

（或者相反，为这两个

.leftCols

使用一个类）然后简单地将css应用到你想要一直延伸下去的列id上问题是我不知道第一个

#leftCols

在页面上有多高，所以我不能绝对定位最后一个块。换句话说，我不知道最后一个块的

顶部

来绝对定位它，我也不知道它的

高度

应该是什么，所以我不能只使用

底部

。不，不，你猜，你怎么知道这会起作用？你不能，因为你没有他的html/css可以看。猜测#1将失败，因为如果你绝对定位它，它将只捕捉到底部，如果你只指定底部。猜测#2将产生其他问题，因为我怀疑他的leftcol是否具有填充左侧区域的绝对高度。猜测#1-如果他希望左列一直向下，则必须指定

bottom:0px

#leftCols