如何使元素完全适合页面折叠

时间：2022-10-13 21:15:48

Check out the demo on Stripe's global page. How do they make it so that the blue area (the animation with the globe) fits the window width and height exactly.

查看Stripe全局页面上的演示。它们如何使蓝色区域(带有地球的动画)完全符合窗口宽度和高度。

Note: This only works on page load. Try resizing the browser window and hit refresh. You'll notice that the blue area fits the window height perfectly.

注意:这仅适用于页面加载。尝试调整浏览器窗口的大小并点击刷新。您会注意到蓝色区域完全符合窗户高度。

1 个解决方案

#1

1  

Here's an example, FIDDLE

这是一个例子,FIDDLE

<div></div>

<script>
  (function($) {
    $('div').css({ height: $(window).innerHeight() + 'px', width: $(window).innerWidth() + 'px' });

    // If you want it to update on window resize
    $(window).resize(function() {
      $('div').css({ height: $(window).innerHeight() + 'px', width: $(window).innerWidth() + 'px' });
    });
  })(jQuery);
</script>

#1

1  

Here's an example, FIDDLE

这是一个例子,FIDDLE

<div></div>

<script>
  (function($) {
    $('div').css({ height: $(window).innerHeight() + 'px', width: $(window).innerWidth() + 'px' });

    // If you want it to update on window resize
    $(window).resize(function() {
      $('div').css({ height: $(window).innerHeight() + 'px', width: $(window).innerWidth() + 'px' });
    });
  })(jQuery);
</script>
标签：

相关文章