Question

所以，我正在为客户创建一个登陆页面，他们想要一个全屏英雄div，并在后台播放视频。执行此操作的传统方法是通过以下方式完成：

div.hero {
    position: absolute;
    width: 100%;
    height: 100%;
}

但是，我很尴尬，我需要将这个职位宣布为relative。我还想限制高度，以便你不能缩小640px以下的div，并且不能超过800px。

这是我的代码：

div.hero {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 800px;
    min-height: 640px;
    display: block;
}

问题是，该框不会变为100%高度，而是会缩放为640px。

我该如何解决这个问题？

Answer 1

你可以用这个：

＆＃13;

    html, body {height:100%; margin:0; }

    div.hero {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 800px;
        min-height: 640px;
        display: block; 
        background:blue;
    }

＆＃13;

<div class="hero"></div>

＆＃13;

Answer 2

使用100vh而不是100％的高度，它将起作用。

div.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 800px;
    min-height: 640px;
    display: block;
  background:red;
}

<div class="hero"></div>

设置英雄div的最大和最小高度

2 个答案: