Question

由于大多数浏览器窗口的大小不同，具体取决于屏幕，我试图让网页没有滚动，同时将页面的完整内容整合到一个浏览器页面中。我的身体有以下风格：

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

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

我目前正在为我的<div>编码高度，我只是意识到这可能适合我的浏览器，但其他人将无法看到同样的事情。

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

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

Answer 1

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

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

另一方面，就个人而言，我不喜欢这种风格的网站。我认为它只在app风格的网站中有用，它需要大量的可用性测试，因为它打破了标准的浏览器行为，并且它需要大量的跨浏览器测试，因为你最终使用了大量的自定义代码。 </rant>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

如果你不想要花哨的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>

Answer 4

这是另一种可能性：
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;
}

祝你好运！

相对于固定的HTML主体高度的响应div高度

4 个答案: