时间戳

首页 > 解决方案 > 确保正文高度不超过浏览器高度

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

问题描述

所以基本上目前，我正在努力使主体的高度永远不会超过浏览器的高度（例如，不需要滚动条），因为我只需要我的内容区域（设置为我相信 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，但只是想先解决这个高度问题。

标签： htmlcss

解决方案

您可能需要将其调整为您的代码；但基本思想如下：

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

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

您可以在此处阅读有关 flexbox 的更多信息：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>

推荐阅读