截面高度应覆盖所有分辨率的整个屏幕答案

【问题标题】：Section height should cover the whole screen in all resolutions截面高度应覆盖所有分辨率的整个屏幕
【发布时间】：2014-09-01 09:41:47
【问题描述】：

我正在做一个项目，客户要求每个部分也应按宽度和高度覆盖整个屏幕。

我使用媒体查询，因为我已成功设置部分以覆盖浏览器的 100% 宽度，这对任何开发人员来说都不难。问题是我不知道如何为高度设置媒体查询我的意思是我不能以 % 为单位设置高度，如果我们以像素为单位设置高度，那么它不能以所有分辨率覆盖整个屏幕。

下面是我真正想说的图像。

部分上方是固定页眉，部分下方是固定页脚。

现在我需要知道是否有一种方法可以使用 css 或 javascript/jquery 或任何其他框架，该部分将覆盖页脚和页眉之间的整个屏幕，无需滚动即可查看整个部分。用户无需向下滚动即可看到整个部分。

【问题讨论】：

我只对高度使用媒体查询，但我无法为每个像素设置大量媒体查询
所以你还没有尝试过什么？查看弹性盒。或者，可以使用 JS 来执行此操作。
你能告诉我如何用 JS 做到这一点吗？
将它们的高度设置为页面高度减去页眉和页脚高度。 stackoverflow.com/questions/1304378/jquery-web-page-height 使用 $('header').height() 获取页眉高度和页脚相同，设置高度 do $('element').height(newHeight);

标签： javascript jquery css

【解决方案1】：

几个解决方案：一种是使用 background-size:cover:

background: url(images/bg.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

您可以在此处阅读有关该选项的更多信息：http://css-tricks.com/perfect-full-page-background-image/

如果你想使用 % 你必须确保所有的父元素都设置了高度。如果不设置html和body的高度，浏览器无法计算%。

所以添加：

html,body{
    height:100%;
    width:100%;
}

第一种方法会为您提供更好的视觉效果，因为它会保持图像比例。

【讨论】：