Question

我目前正在设计一个单页网站，我希望其中一些网页有一列文字和一张图片。但是，图像应该“填充”我使用此代码的浏览器窗口大小：

<script type="text/javascript">
$(document).ready(function() {
 $( ".screenheight" ).each(function(){
    var $this = $(this);
    $this.css({'min-height':($(window).height())+'px'});

    $(window).resize(function(){
        $this.css({'min-height':($(window).height())+'px'});
     });
  });
});
</script>

这是有效的，但是我无法找到如何仍然将列与文本对齐到菜单（例如页面with width: 960px和margin: 0 auto;）

这是我想要实现的设计图片： imgur link

我希望有人可以帮助我。

Answer 1

不应使用jQuery来获取窗口的高度，而应使用CSS的视口长度vh＆amp; vw将事物设置为视口的大小。

这应该很容易为您提供完整的页面外观。但是，对于您对列和菜单的问题，我仍然有点不清楚。

有关这些单元的更多信息，请访问：Viewport Relative Lengths

如何在代码中实现这种设计？

1 个答案: