确保正文高度不超过浏览器高度

Question

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

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

所有屏幕上的期望结果：

某些屏幕上的当前结果：

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-container 来封装页面的内容；您将此容器设置为具有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>