关于高度 CSS 响应性答案

【问题标题】：On Height CSS responsive-ness关于高度 CSS 响应性
【发布时间】：2016-01-12 17:31:35
【问题描述】：

我正在尝试模仿这个网站。

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

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

【问题讨论】：

【解决方案1】：

这对你有用吗？ https://jsfiddle.net/0ds7fLce/ vh 单位是 CSS3 规范的一部分，它代表视口高度的百分比。

.myclass {
    height: 100vh;
}

应该做的伎俩。

【讨论】：

不可能那么简单......然而......它是。

【解决方案2】：

如果您想要某人正在查看的屏幕的确切高度，您可以在 CSS 属性“height”中使用“vh”，这意味着 View Height。然后，如果您希望每个部分具有不同的颜色，则需要为每个部分添加不同的类或 id，以便您可以在 CSS 中专门为每个部分添加代码。您还希望将 'width:100%' 添加到 'body' 和每个 'div' 中，以便它使用浏览器的整个宽度。

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

#example-div1 {
  height:100vh;
  width:100%;
  background-color:#fff;
}

#example-div2 {
  height:100vh;
  width:100%;    
  background-color:#555;
}

#example-div3 {
  height:100vh;
  width:100%;  
  background-color:#111; 
}

【讨论】：

【解决方案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;
}

【讨论】：