Question

我有一个非常愚蠢的问题，我的网站应该只占用浏览器窗口的高度，它应该永远不会更大。那是因为我基本上有两个div的pn，而div内部的内容应该是滚动条，但不是整个页面。第一个div没有固定宽度，但第二个div没有。

代码：

<div class="overall"> <!-- the overall site should always have the height of the 
browser window, it shall never be bigger and never have a scrollbar, only the areas part and the log part should each have a scrollbar -->
<div class="areas"> <!-- the div without fixed height -->
    <div class="area">
    </div>
    <div class="area">
    </div>
    <div class="area">
    </div>
</div>
<div class="log"> <!-- the div with a fixed height -->
</div>

.area {
    height: 72px;
    border: 1px solid black;
}

.areas {
    overflow: auto;
    border: 1px solid blue;
}

.log {
    height: 500px;
    overflow: auto;
    border: 1px solid lightgrey;
}

这是我的小提琴：jsFiddle

我的网站只占用浏览器窗口的高度，这是行不通的。

Answer 1

您可能对使用vh（查看端口高度）单位感兴趣。

这些与屏幕的物理尺寸有关。

例如，如果我将div设置为50vh，它将是用户屏幕的50％高度。

在你的情况下，在你的html和正文上设置100vh作为最大高度意味着用户不能使高度或身体超过可以看到的任何东西（如果这是有道理的）。

演示：

html{
  background:rgba(0,0,0,0.2);
  max-height:100vh;
  }
body{
  margin:0;padding:0;
  height:50vh; /*need this since I've no content on my page to begin with!*/
  max-height:50vh;
  background:rgba(0,0,0,0.2);
  }

使用,分隔符显然可以减少这种情况：

html,body{
  margin:0;padding:0;
  height:100vh; /*ensures full screen even if content is shorter*/
  max-height:50vh;
  }

有了这个，用户将无法扩展内容。

需要

html,
body {
  margin: 0;
  padding: 0;
  max-height: 100vh;
  height: 100vh;
}
.area {
  height: 72px;
  border: 1px solid black;
}
.areas {
  overflow: auto;
  border: 1px solid blue;
}
.log {
  height: 500px;
  overflow: auto;
  border: 1px solid lightgrey;
}
@media screen and (max-height: 500px) { 
  /*anything placed here will come into play when the height of view is 500px or less. here I have decided to hide the areas divs so that the .log can be seen in full*/
  .areas {
    height:30px;
    background:red;
    overflow-y:scroll;
  }
}

<div class="overall">
  <!-- the overall site should always have the height of the 
browser window, it shall never be bigger and never have a scrollbar, only the areas part and the log part should each have a scrollbar -->
  <div class="areas">
    <!-- the div without fixed height -->
    <div class="area">
    </div>
    <div class="area">
    </div>
    <div class="area">
    </div>
  </div>
  <div class="log">
    <!-- the div with a fixed height -->
  </div>

使网站仅使用浏览器窗口的高度

1 个答案: