如何在浏览器调整大小调整div [英] How to resize div on browser re-size

问题描述

对，所以不使用粘性页脚，我决定创建一个jQuery函数来改变我的#mainContent div的大小，以便页脚可以很好地适应。

基本上我想要做的是

  #mainContent {height：100％ -  40px; } 
  

其中

  #footer {height：40px; } 
  

我想出了

  $（window）.resize（function（）{
 var mainContent = $（'＃mainContent'）。innerHeight（） -  40; 
 $（'＃mainContent' ）.css（height，mainContent）; 
}）; 
 

但每次调整大小时，它只是将#mainContent缩短40px，而不是重新工作#mainContent应该是，然后是-40px;

  $（window）.resize（function（）{
 var mainContent = $（document）.height（） -  80; 
 $（'＃mainContent'）css（height，mainContent）; 
} 
  

我觉得我错过了一些东西。

请帮助。

编辑：页眉和页脚是静态的（即每个40像素），我想调整mainContent的大小， footer使用margin-top：-40px;）。我仍然希望我的页脚在屏幕的底部。
Edit2：添加第二次尝试。

解决方案

我使用您的屏幕 height是mainContent div和footer，并且您决定通过JavaScript + jquery函数以响应的方式控制页脚，使用窗口或文档高度来计算内容div高度，如下所示：

  var mainContent = $（window）.height（）-40; 
 var mainContent = $（document）.height（）-40; 
  

按照您的要求显示其工作的示例

我为你编写了一个简单的标记，但足以表明它也应该为你工作。

你需要注意重置/考虑可能崩溃的任何可能的垂直边距，或者为了获得要在函数中应用的正确数字而进行的任何操作。

我应用了一分钟mainContent规则的高度声明只是为了我的例子。当然你根本不需要，以及我使用的那些可怕的颜色：）

positionFooter 不需要这样扩展。

 <$ c $ 
 c> $（function（）{
 function positionFooter（）{
 var wh = $（window）.height（）; 
 var wc = wh  -  80; 
 $ '#mch'）。text（wc）; 
 $（＃mainContent）。height（wc）; 
} 
 $（window）.resize（positionFooter）; 
 positionFooter（）; 
}）; 
  

在将此解决方案传播到自己的代码时，注意标识符，选择器等。

无论如何，我不能想象为什么你不想应用一个完整的CSS解决方案，而不是使用javascript。但是没问题。它的你的电话。这里是小提琴。享受！

Right, so instead of using sticky footer, I've decided to create a jQuery function that will change the size of my #mainContent div so that the footer can fit in nicely.

Basically what I'm trying to do is have

 #mainContent { height: 100% - 40px; }

Where

#footer { height:40px; }

I came up with

$(window).resize(function() {
    var mainContent = $('#mainContent').innerHeight() - 40;
    $('#mainContent').css("height", mainContent);
});

but every time I resize, it simply shortens #mainContent by 40px instead of re-working what #mainContent is supposed to be, then -40px;

$(window).resize(function() {
    var mainContent = $(document).height() - 80;
    $('#mainContent').css("height", mainContent);
});

I feel like I'm missing something.

Please help.

Edit: header and footer are static (i.e. 40px each), I'd like to resize mainContent without having footer flow over it (because sticky footer uses margin-top:-40px;). I still want my footer to be at the bottom of the screen. Edit2: added the second try.

解决方案

I the only elements using your screen height are the mainContent div and the footer, and you decided to control your footer through your javascript+jquery function in a responsive way, use window or document height in order to compute the content div height as so:

 var mainContent = $(window).height() -40;  
 var mainContent = $(document).height() -40; 

An example to show it working as you required.

I coded for you a simple markup but enough to show you that it should work for you as well.

Its up to you to take care of reseting/considering any possible vertical margins that can be collapsing or whatever in order to obtain the correct figure to apply in the function.

I applied a min-height declaration for the mainContent rule just for my example. of course you dont need that at all as well as those horrible colors I used :)

The positionFooter function does not need to be so extended. I wrote it that way for a didactic purpose

Here the code:

$( function () {
    function positionFooter() {
        var wh = $(window).height();
        var wc = wh - 80;
        $('#mch').text(wc);
        $("#mainContent").height(wc);
    }
    $(window).resize(positionFooter);
    positionFooter();   
});

Take care of identifiers , selectors, etc when you propagate this solution to your own code.

Any way, I cant imagine why you dont want to apply a full CSS solution instead of using javascript. But Ok. Its your call. Here is the fiddle. Enjoy!

这篇关于如何在浏览器调整大小调整div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！