如何在调整窗口大小时调整div的最大高度？ [英] How to resize a div's max-height upon window resize?

问题描述

我一直在寻找答案。我已经阅读了这里的一些内容，似乎没有人能够解决我想要做的事情。当窗口大小达到特定点时，我想调整div的最大高度。主菜单位于页面底部，内容从菜单向上滑动。

我拥有的示例：

 < div class =content> 
 //一些内容图片/文字等
< / div> 
  

css：

  .content {width：550px;溢出：自动; }`
  

现在显然我可以在css中设置最大高度，但我不需要它会生效，直到屏幕尺寸达到800px的高度。让我知道如果我在这里丢失简单的东西。

我愿意使用jQuery或css规则。

解决方案

  $（window）.on（'resize'，function（）{
 if（$（this）.height（）<= 800）{
 $（'。content'）。css（'max-height'，'800px'）; //设置最大高度
} else {
 $（'。content'）。css（'max-height'，''）; //删除属性
} 
}）; 
  

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.

Example of what I have:

<div class="content">
    //some content pics/text etc.
</div>

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.

I am open to using jQuery or css rules.

解决方案

$(window).on('resize', function(){
    if($(this).height() <= 800){
        $('.content').css('max-height', '800px'); //set max height
    }else{
        $('.content').css('max-height', ''); //delete attribute
    }
});

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