jQuery，如果内容尚未变大，则更改 div 高度以自动填充屏幕的其余部分答案

【问题标题】：jQuery, change div height to automatically fill out remainder of screen if content isn't already largerjQuery，如果内容尚未变大，则更改 div 高度以自动填充屏幕的其余部分
【发布时间】：2010-07-11 08:14:25
【问题描述】：

我的网站结构大致如下：

-----------------
      header
-----------------
     |           
     |           
 side|    main  
     |
     |
-----------------
      footer

我试图让我的“主” div 占据屏幕上的所有剩余高度（并在调整窗口大小期间调整大小），以便“页脚”总是自动推到屏幕底部（似乎卡在屏幕底部）。

但是，我希望仅当“主”div 的内容尚未达到该高度或更大时才会发生这种情况。我正在使用 jQuery，但我很难正确计算。有人可以给我一个正确方向的指针吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这个方法叫做sticky footer，你不需要jQuery。您可以使用 CSS：

[See it in action]

/* 
Sticky Footer by Ryan Fait
http://ryanfait.com/sticky-footer/ 
*/

* {
 margin: 0;
}
html, body {
 height: 100%;
}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -142px; /* the bottom margin is the negative 
                              value of the footer's height */
}
.footer, .push {
 height: 142px; /* .push must be the same height as .footer */
}

【讨论】：

出现了一个问题，现在已修复。只要确保如果您为页脚设置填充（就像我所做的那样），请相应地更改包装边距。