jQuery，更改div的高度以自动填充屏幕的其余部分(如果内容还不是很大的话) [英] jQuery, change div height to automatically fill out remainder of screen if content isn't already larger

问题描述

我的网站的结构大致如下:

My site is structured roughly like this:

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

我正在尝试让我的主" div占用屏幕上的所有剩余高度(并在调整窗口大小时调整大小)，以便始终将页脚"自动推到屏幕底部(显示为停留在屏幕底部).

I'm trying to get my "main" div to take all of the remaining height on the screen (and resize during window resizing), so that "footer" is always automatically pushed to the bottom of the screen (appearing to be stuck at the bottom of the screen).

但是，我只希望在主" div的内容尚未达到该高度或更大时才发生这种情况.我正在使用jQuery，但我很难正确地计算出这个值.有人可以给我正确的方向指示吗?

However, I want this only to happen if the content of the "main" div isn't already at that height or even larger. I'm using jQuery but I have a hard time calculating this correctly. Can someone give me a pointer in the right direction?

推荐答案

该方法称为粘性页脚，您不需要jQuery.您可以使用 CSS :

The method is called sticky footer, and you don't need jQuery for that. You can use CSS:

/* 
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 */
}

这篇关于jQuery，更改div的高度以自动填充屏幕的其余部分(如果内容还不是很大的话)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！