相对于固定 HTML 正文高度的响应式 div 高度答案

【问题标题】：Responsive div height relative to a fixed HTML body height相对于固定 HTML 正文高度的响应式 div 高度
【发布时间】：2015-05-28 09:14:07
【问题描述】：

由于大多数浏览器窗口的大小因屏幕而异，我试图让网页没有滚动，同时将页面的全部内容放入一个浏览器页面。我的身体有以下风格：

<body style="overflow:hidden;height:100%">

我想将两个<div> 堆叠在一起。一个占据 60% 的高度，另一个占据 40%，同时保持固定以覆盖整个浏览器视口。这可能吗？

我目前正在为我的<div> 进行硬编码，我刚刚意识到这可能适合我的浏览器，但其他人将无法看到相同的内容。

是否会根据浏览器的高度在JS中为我的两个<div>动态设置css类。是一个很好的解决方案吗？

我知道这可能会带来另一个问题，即我的 div 的内容会以一种奇怪的方式被压缩或扩展，但我想我可以稍后再处理。

【问题讨论】：

标签： jquery html css responsive-design

【解决方案1】：

这是另一种可能性：
http://codepen.io/panchroma/pen/ZYwXLP

在你的情况下，我认为使用vh 就像我在这里所做的那样，或者flexbox 有很多推荐它们，你最终会得到漂亮干净的代码。

HTML

<div class="top">top div</div>
<div class="bottom">bottom div</div>

CSS

.top{
  height:60vh;
}

.bottom{
  height:40vh;
}

祝你好运！

【讨论】：

【解决方案2】：

如果你不想要花哨的 vh 和 vw 东西，这仍然足够：

html, body{
  height: 100%;
}
body{
  overflow: hidden;
}
.foo{
  height: 60%;
  background: #369;
}
.bar{
  height: 40%;
  background: #693;
}

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="foo"></div>
    <div class="bar"></div>
  </body>
</html>

【讨论】：

【解决方案3】：

如果你是supporting quite modern browsers（≥IE9、Firefox、Chrome、Safari、Opera），你总是可以使用视口测量单位：vh 和vw :)

body {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 100%;
  /* or 100vw, that's the same */
  height: 100vh;
}
.h60 {
  background-color: #eee;
  height: 60vh;
}
.h40 {
  background-color: #333;
  height: 40vh;
}

/* Unrelated styles, for display purposes only */
.wrapper > div {
  display: flex;
  font-family: Helvetica, Arial, sans-serif;
  align-items: center;
  justify-content: center;
}
p {
  margin: 0;
}
.wrapper > div:last-child {
  color: #eee;
}

<section class="wrapper">
  <div class="h60">
    <p>I have a height that is 60% of the viewport.</p>
  </div>
  <div class="h40">
    <p>I have a height that is 40% of the viewport.</p>
  </div>
</section>

唯一的问题是 vh 的计算在 iOS7 中存在错误，因此您可能希望使用特定的 @media 查询来手动设置 iOS7 Safari 用户的高度。

【讨论】：

【解决方案4】：

如果您想根据视口的高度动态设置 div 的高度，那么通常 JavaScript 是您的最佳选择。

在显示任何内容之前，计算窗口的高度，设置所需的高度，然后使内容可见。

顺便说一句，我个人不喜欢这种风格的网站。我认为它只在应用风格的网站中有用，它需要大量的可用性测试，因为它破坏了标准的浏览器行为，并且它需要大量的跨浏览器测试，因为你最终会使用大量的自定义代码。 </rant>

【讨论】：