确保机身高度不超过浏览器高度

Question

所以从本质上讲，我目前正在尝试使它的高度永远不会超过浏览器的高度（例如，不需要滚动条），因为我只需要我的内容区域（设置为我认为div类的内容）作为可滚动部分。

现在，我可以在一个屏幕尺寸上查看它，并将该内容区域设置为70vh，以使其看起来恰到好处。但是，在另一个屏幕尺寸上，相同的70vh可能会更大或更小（从而超过浏览器的高度）。而且我尝试将body和html设置为100vh，但它什么也没做。

所有屏幕上所需的结果：

某些屏幕上的当前结果：

index.html位于此处：https://github.com/ashworthian/stprecious/blob/master/index.html

css位于此处：https://github.com/ashworthian/stprecious/blob/master/css/style.css

是的，我知道我需要清理我的CSS，但是只是想先解决这个高度问题。

Answer 1

您可能需要根据您的代码进行调整；但基本思路如下：

使用 Flexbox ；您可以定义一个Flex容器，该容器将封装页面的内容；您将此容器设置为具有flex-direction: column，以便将元素垂直放置在内部。

此后，您必须告诉具有可滚动内容的部分具有属性flex: 1 1 auto；这是flex-grow, flex-shrink, flex-basis的简写。这将使其使用页面上剩余的所有可用空间，而不会实际增加页面的大小。

您可以在此处了解有关flexbox的更多信息：Complete Guide to Flexbox，这确实值得，并且无需太多CSS即可轻松轻松地构建此类布局

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #000a34;
}

.container {
  height: 100vh;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

header {
  margin-bottom: 10px;
}

.content {
  flex: 1 1 auto;
  padding: 25px;
  background-color: black;
  color: #FFCC66;
  text-transform: uppercase;
  text-align: center;
  overflow-y: auto;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4.8vmin;
  background: linear-gradient(#505050, #424242)
}

nav a {
  font-size: 2.9vmin;
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  margin: 0 15px;
}

nav a:hover {
  color: #FF9C00;
}

.purpleheading {
  font-size: 5vmin;
  color: #9C9CFF;
  padding: 15px 0 0 30px;
  text-align: left;
}

footer {
  margin: 8px auto 0;
  background-color: #252525;
  color: white;
  text-transform: uppercase;
  font-size: 16px;
}

::-webkit-scrollbar {
  width: 1em;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px 10px black;
  border: solid 5px black;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px 10px #9C9CFF;
  border-radius: 10px;
  border: solid 5px black;
}

<div class="container">
  <header>
    <nav>
      <a href="index.html">home</a>
      <a href="chapters.html">chapters</a>
      <a href="records.html">starfleet records</a>
      <a href="aboutme.html">about the author</a>
    </nav>
  </header>

  <section class="content">
    <h3 class="purpleheading">to boldly go where no man has gone before . . .</h3>
    <p class="hometext">Star Trek: Precious is a series set in the year 2409, approximately 30 years after the events of the film Star Trek: Nemesis. Following the crew of the U.S.S. Pureshashu where the Federation has entered a time of both relative peace but is also on
      the verge of war with the Klingdom Empire. The latter of which can no longer allow the Federation to maintain peace with the Romulan Empire due to their great distaste for the Romulans. But the Klingons are not the only nefarious individuals who
      seek to cause chaos and conflict throughout the known galaxy.</p>
    <p class="hometext">Both familiar enemies and new foes will test the Federation’s founding principles of peace and exploration in a time where Starfleet must hold onto these principles more than ever. The Starship Pureshashu, NCC-86521, a newer generation Vesta-class
      vessel was recently commissioned by Admiral J’Greed for his newly promoted son, Nathan Jenkins. Upon it’s departure for it’s maiden voyage which was to entail the pick-up of it’s exexcutive officer as part of a friendly agreement between the United
      Federation of Planets and the newly formed Romulan Republic, as well as end the voyage by returning to Deep Space Nine for it’s final crew members.</p>
    <p class="hometext">However this particular event in history begun a series of events that would lead the Pureshashu and it’s crew from one bad situation into another. During which time, the Klingdom Empire would begin to become more and more aggressive as the Federation
      and the Klingdom Empire would then soon enter all out war. Therefore for what would start out as a set of missions of a peaceful nature including the re-exploration of the Delta Quadrant would ultimately lead the Pureshashu and it’s crew into a
      deadly plot deeloping behind the scenes that may very well change the galaxy as everyone knows it, forever.</p>
  </section>

  <footer>
    <small>copyright &copy; ashworthian designs 2019 • all rights reserved • version one</small>
  </footer>
</div>