javascript 如何设置最小高度和最大高度等于窗口高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26837493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set min-height and max-height equal to window Height
提问by Rahad Rahman
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 高度设置为最小窗口高度，但不能以类似的方式将最大高度设置为 windowHeight。这是代码
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('.sidebar').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
回答by Paul
You don't need javascript nowadays to do that. Pure CSS is sufficient (and just heightwould be enough as well since you want to set min-heightand max-heightto the same value):
你现在不需要 javascript 来做到这一点。纯 CSS 就足够了（并且height也足够了，因为您希望将min-height和设置max-height为相同的值）：
.sidebar {
height: 100vh;
}
vhis a relative unit referring to the height of the viewport. And it even works when resizing the window. Btw, same goes for vwwhich is the width of the viewport.
vh是指视口高度的相对单位。它甚至可以在调整窗口大小时起作用。顺便说一句，vw视口的宽度也是如此。
More information on the set of relative unitsand its browser support(as proposed by comments).
回答by Jason McFarlane
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?
如果您希望 min-height 和 max-height 都是窗口的大小，为什么不放弃 mins 和 maxs 而只设置高度本身？你对你的代码非常满意，但我会稍微不同地构造它。你在加载 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
回答by Mohammed Abdella
You can try this
你可以试试这个
$('.sidebar').css({
"max-height": windowHeight+"px",
"min-height": windowHeight+"px"
});
