Question

我可以将div高度设置为最小窗口高度，但不能将window-high设置为windowHeight。这是代码

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

Answer 1

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

.sidebar {
  height: 100vh;
}

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

More information on the set of relative units及其browser support（由评论提出）。

Answer 2

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

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

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

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

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

或者，如果您尝试将网页设为平板电脑风格的网络应用程序，则可以单独使用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*/
}

这将在没有任何javascript / jquery的情况下为您提供相同的效果

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

Answer 3

你可以试试这个

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

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

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

3 个答案: