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;}

现在这是我的问题，它位于内容区域。我的背景基于观看者设备的大小进行调整，因此在大多数情况下，我的280px高度将不适用，文本将在我不想要的地方溢出，或者在某些情况下不覆盖全屏。它完美无缺，只有1366 x 780分辨率。

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

任何有关我如何解决这个问题的见解将不胜感激。这是一个目前看起来像的链接......

jqwebexamples.com/iAM_Talent/Version1/index.html

Answer 1

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

用百分比调整内容的高度

1 个答案: