CSS 列高和文本区域

Question

我有一个带有页眉和页脚的两列布局。 I have created a JSFilddle with demonstrating this .

左栏的内容通常比右栏多。

1. 如何让右列扩展到左列的高度，或者只填满视口(viewport)的高度？我有一些类似的示例，但不是始终位于显示屏底部的页脚。

2. 如何让文本区域填充其父级右列的高度(我什至还没有接近解决这个问题)。

Answer 1

I've just edited your jsfiddle.

1. 想法是在您的右列 block 上设置一个最小高度，并让它确定整个内容部分的高度，而不是从其父级继承 height 属性。

2. 其次，关于文本区域。这一点很棘手，每次用户调整他们的视口(viewport)时，您都需要使用 javascript 来呈现它，并相应地更新文本区域的属性高度。

干杯

• minHeight 很重要，因为您有一个空的内容容器并且您不希望页脚被推到页眉的正下方。因此 minheight 可以防止这种情况发生。一旦右侧列的高度超过minHeight，父div将相应展开。

• 如果您真的希望它始终展开完整的窗口，我认为 h 是视口(viewport)的高度没有任何问题。但是我建议使用 $(window).innerHeight 而不是 Height()。但同样，这是 javascript，您的代码永远不会在不同的浏览器上呈现相同的东西，所以请记住这一点 :)

  $(window).resize(function() { var h = $(window).height(); $('#MyTextarea').css('height', h-300); });