Question

我试图模仿这个网站。

https://elrumordelaluz.github.io/csshake/

每种颜色都是不同的部分，所有部分都基于屏幕的高度。无论如何要实现这个w / out只是复制demo.css？只想简单地实现正在发生的事情。

Answer 1

这能为你完成这项工作吗？ https://jsfiddle.net/0ds7fLce/ vh单元是CSS3规范的一部分，它表示视口高度的百分比。

.myclass {
    height: 100vh;
}

应该做的伎俩。

Answer 2

如果您想要有人看到的屏幕的确切高度，您可以使用＆＃39; vh＆＃39;在CSS属性＆＃39; height＆＃39;中，这意味着查看高度。然后，如果您希望每个部分具有不同的颜色，则您希望为每个部分添加不同的类或ID，以便您可以在CSS中专门为每个部分添加代码。您还想添加宽度：100％＆＃39;对于＆＃39;身体＆＃39;和每个＆＃39; div＆＃39;这样它就可以使用浏览器的全宽。

我们假设您有3个部分，每个部分需要不同的颜色，它看起来像这样：

＆＃13;

string[] Brands = new string[10];
            Brands[0] = "Yamaha";
            Brands[1] = "Suzuki";
            Brands[2] = "Harley";
            Brands[3] = "Kawasaki";

＆＃13;

Answer 3

我认为使用百分比代替vh会更好，因为浏览器支持较旧：

http://codepen.io/yonimor/pen/MKoGBj

<div class="first"></div>
<div class="second"></div>

html, body {
  height: 100%;
}

.first {
  height: 100%;
  background: red;
}

.second {
  height: 100%;
  background: yellow;
}

关于高度CSS响应性

3 个答案: