css - 使 DIV 匹配浏览器高度

Question

我有 3 个

元素在屏幕上彼此堆叠。

   <div id="header"></div>
  <div id="content" style="height:900px;width:1400px; "></div>
  <div id="footer"></div>

我需要保持中心 DIV 的规定确切大小，我需要“页眉”和“页脚”来均匀填充顶部和底部的空间(从“内容”高度剩余)，因此所有三个 DIV 都将占据精确窗口高度。

此外，我希望页眉和页脚设置了一些最小高度(因此，如果屏幕变得太小，这些 DIV 将保持一定高度，继续显示其内容，并出现滚动条)。

我可能会在 JS 中做 int，但 CSS 必须是可能的。提前致谢!

最佳答案

您可以使用以下 javascript 代码在带有 jQ​​uery 的 JS 中很容易地做到这一点:

var spaceHeight = $(window).height()-$("#content").height();
$("#header, #footer").css('height', spaceHeight/2);

您应该将该代码放在某个地方，以确保在布局发生变化时调用它，或者在 $(document).ready() 页面布局将是静态的情况下调用它。

并且为了保留 #footer 和 #header 的最小高度，请使用 CSS 中的 min-height 属性。

这是一个例子:http://jsfiddle.net/4h5f8/17/

关于css - 使 DIV 匹配浏览器高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16501263/

Answer 1

您可以使用以下 javascript 代码在带有 jQ​​uery 的 JS 中很容易地做到这一点:

var spaceHeight = $(window).height()-$("#content").height();
$("#header, #footer").css('height', spaceHeight/2);

您应该将该代码放在某个地方，以确保在布局发生变化时调用它，或者在 $(document).ready() 页面布局将是静态的情况下调用它。

并且为了保留 #footer 和 #header 的最小高度，请使用 CSS 中的 min-height 属性。

这是一个例子:http://jsfiddle.net/4h5f8/17/