jQuery 如何在调整窗口大小时调整 div 的最大高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11981174/
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 resize a div's max-height upon window resize?
提问by Anthony Russo
I have been searching high and low for an answer. I have read through some things on here and no one seems to have a solution to what I am wanting to do. I am wanting to resize a div's max-height when the window size reaches a certain point. The main menu is at the bottom of the page and the content comes out of the menu sliding upwards.
我一直在寻找答案。我已经阅读了这里的一些内容，似乎没有人对我想要做的事情有解决方案。我想在窗口大小达到某个点时调整 div 的最大高度。主菜单位于页面底部，内容从菜单向上滑动出来。
Example of what I have:
我所拥有的示例：
<div class="content">
//some content pics/text etc.
</div>
css:
css：
.content { width: 550px; overflow: auto; }`
Now obviously I can set the max-height in the css currently but I don't need it to take effect until the screen size reaches 800px in height. Let me know if I am missing something simple here.
现在显然我可以在当前的 css 中设置 max-height，但在屏幕尺寸达到 800px 高度之前我不需要它生效。如果我在这里遗漏了一些简单的东西，请告诉我。
I am open to using jQuery or css rules.
我愿意使用 jQuery 或 css 规则。
回答by Adam Merrifield
$(window).on('resize', function(){
if($(this).height() <= 800){
$('.content').css('max-height', '800px'); //set max height
}else{
$('.content').css('max-height', ''); //delete attribute
}
});
回答by Shih-En Chou
I have an example: http://jsfiddle.net/sechou/WwpuJ/
我有一个例子：http: //jsfiddle.net/sechou/WwpuJ/
$(window).resize(function () {
if($(window).height() <= 800){
$('div.content').css('max-height', 800);
}else{
$('div.content').css('max-height', '');
}
});
回答by Antony
I know this is an oldish post but I wonder if a CSS only solution would have been (and would now be) better here?
我知道这是一篇陈旧的帖子，但我想知道仅使用 CSS 的解决方案是否会（现在会）更好？
.content {
// No need for max-height here
}
@media(max-height:800px){
.content {
max-height:800px;
}
}
