使用百分比调整内容的高度

Question

我目前正在为娱乐业的客户创建一个网页。我认为让页面看起来像电影院会很酷，并且在屏幕上会显示文本，但是我遇到了一些问题。

为了实现我目前的进步，我使用了以下内容作为背景：

 body   {margin:0;
    padding:0;
    width:100%;
    height:100%;
    background-image:url(../images/v1bg.png);
                    background-repeat:no-repeat;
                    background-size:cover;
                    }

然后对于内容，我做了以下操作：

#content    {width:55%;
            height:280px;
            overflow-y:scroll;
             margin:0px auto;
        margin-top:5%;
        text-align:center;} 

现在这是我的问题，它在于内容领域。我的背景会根据观看者设备的大小进行调整，因此在大多数情况下，我的 280 像素高度将不适用，文本要么在我不想要的地方溢出，要么在某些情况下无法覆盖全屏。它只能以 1366 x 780 的分辨率完美运行。

为了解决这个问题，我想也许我可以将内容的高度设置为百分比，这是行不通的。当我将高度转换为百分比时，它会变形背景，并完全消除高度障碍，使内容全部溢出屏幕等。

关于我如何解决此问题的任何见解将不胜感激。这是它当前外观的链接...

jqwebexamples.com/iAM_Talent/Version1/index.html

Answer 1

您是否考虑过使用 css 单位 'vw' 和 'vh'？基本上定义相对于视口尺寸的大小/距离。