jQuery，如果内容不是更大，则更改div高度以自动填充屏幕的剩余部分

Question

我的网站结构大致如下：

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

我正在尝试让我的“主”div占据屏幕上的所有剩余高度（并在窗口大小调整期间调整大小），以便“页脚”始终自动推到屏幕底部（显示为卡在屏幕的底部）。

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

Answer 1

该方法称为粘性页脚，您不需要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 */
}