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

Question

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

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

下面是我想说的实际图像。

在该部分上方是固定的标题，并且该部分下方是固定的页脚。

现在我需要知道有没有办法使用css或javascript / jquery或任何其他框架，该部分将覆盖页脚和标题之间的整个屏幕，无需滚动查看整个部分。用户应该看到整个部分而不向下滚动。

Answer 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和正文的高度，浏览器就无法计算％。

所以添加：

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

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