如何设置min-height和max-height等于window Height

I able to set a div height as min-window height but can't set max-height as windowHeight similar way. Here is the code

我能够将div高度设置为最小窗口高度但不能将max-height设置为windowHeight类似的方式。这是代码

 $(document).ready(function() {   
     function setHeight() {
         windowHeight = $(window).innerHeight();
         $('.sidebar').css('min-height', windowHeight);   
     };   
     setHeight();
     $(window).resize(function() {
         setHeight();   
     }); 
 });

3 个解决方案

#1

You don't need javascript nowadays to do that. Pure CSS is sufficient (and just height would be enough as well since you want to set min-height and max-height to the same value):

你现在不需要javascript来做到这一点。纯CSS就足够了（因为你想将min-height和max-height设置为相同的值，所以只有高度就足够了）：

.sidebar {
  height: 100vh;
}

vh is a relative unit referring to the height of the viewport. And it even works when resizing the window. Btw, same goes for vw which is the width of the viewport.

vh是指视口高度的相对单位。它甚至可以在调整窗口大小时起作用。顺便说一句，同样适用于vw，即视口的宽度。

More information on the set of relative units and its browser support (as proposed by comments).

有关相关单元集及其浏览器支持的更多信息（由评论提出）。

#2

If you want both the min-height and max-height to be the size of the window why dont you just forgo the mins and maxs and just set the height itself?? You are pretty much bang on with your code however I would structure it a little differently. Are you loading the jQuery library?

如果你想要最小高度和最大高度都是窗口的大小，为什么你不放弃分钟和最大值，只是设置高度本身？您对代码非常感兴趣，但我会以不同的方式构建它。你在加载jQuery库吗？

$(document).ready(function() {   
    setHeight();
});

$(window).resize(function() {
    setHeight();   
}); 

function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.sidebar').css('height', windowHeight);   
    console.log(windowHeight);
}

This will make the sidebar 100% of the screen height on load and on screen resize.

这将使侧栏100％的屏幕高度在加载和屏幕上调整大小。

Alternatively if you are trying to make a page a tablet style web application you can achieve this 100% sidebar with css alone

或者，如果您尝试将页面设置为平板电脑风格的Web应用程序，则可以单独使用css实现此100％侧边栏

html,body {
   width: 100%;
   height: 100%;
   overflow:hidden;
}
.sidebar {
   height: 100%;
   /*set overflow-x + y to scrolls if you have a lot of content*/
}

this will give you the same effect without any javascript/jquery

没有任何javascript / jquery，这将给你相同的效果

http://jsfiddle.net/kdwnk2ax/1/

#3

You can try this

你可以试试这个

$('.sidebar').css({
    "max-height": windowHeight+"px",
    "min-height": windowHeight+"px"
});

Demo http://jsfiddle.net/9kkukk2s/

演示http://jsfiddle.net/9kkukk2s/

#1