Question

我有以下代码：

$(document).ready(function() {

    $('body').css('overflow', 'scroll');
    var heightWithScrollBars = $(window).height();
    $('body').css('overflow', 'auto');

    alert('heightWithScrollBars = ' + heightWithScrollBars);

    if ( heightWithScrollBars < 700 ){
       $(".vert, .simply-scroll-clip").height('270px'); 
   }        
});

链接样式表中有一个定义 - 这些元素的高度均为400px。

当屏幕确实小于700时，if {}会执行，但高度变化不会执行。但即使我在控制台中运行确切的行$(".vert, .simply-scroll-clip").height('270px'); - 该命令确实有效。但不是在运行onload时。

谁能告诉我为什么？

谢谢！

Answer 1

为此，您可以将viewport-width与resize事件一起使用。

以vw

的方式应用高度

.vert, .simply-scroll-clip {
    height: 2vw;
}

然后调整大小

var causeRepaintsOn = $(".vert, .simply-scroll-clip");

$(window).resize(function() {
  causeRepaintsOn.css("z-index", 1);
});

来源：CSS-Tricks ||用于一次项目。

如果窗口高度，则改变css高度

1 个答案: