css - CSS 列高和文本区域

Question

我有带有页眉和页脚的两列布局。我创建了一个 JSFilddle 来演示这个。

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

1. 如何让右列扩展到左列的高度，或者只是填充视口的高度？我有一些类似的例子，但不是总是在显示底部的页脚。

2. 我怎样才能让 textarea 填充其父级的高度，右列（我什至还没有接近解决这个问题）。

Answer 1

我刚刚编辑了你的 jsfiddle。

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

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

干杯

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

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

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