Ensuring body height does not exceed browser height

Question

So essentially at present, I am trying to make it so the body's height never exceeds the height of the browser (E.G. there is no need for a scroll bar) as I only require my content area (which is set to I believe the div class content) to be the scrollable section.

Now I can view it on one screen size and get it looking just right by setting that content area to have I believe 70vh. But then on another screen size that same 70vh will either be smaller or larger (and thus exceed the browser's height). And I've tried setting like 100vh to the body and html and it just does nothing.

Desired result on all screens:

Current result on some screens:

index.html is located here: https://github.com/ashworthian/stprecious/blob/master/index.html

css is located here: https://github.com/ashworthian/stprecious/blob/master/css/style.css

And yes I know I need to clean my css up but just trying to get this height thing fixed first.

Answer 1

You'd probably need to adjust this to your code; but the basic idea is the following:

By using Flexbox; you can define a flex-container which will encapsulate the content of the page; you set this container to have a flex-direction: column, so it positions the elments inside vertically.

After that, you have to tell the section that has the scrollable content to have a property of flex: 1 1 auto; which is short-hand for flex-grow, flex-shrink, flex-basis. This will make it use all the available space that remains on the page without actually increasing the size of it.

You can read more about flexbox here: Complete Guide to Flexbox, its really worth it and will help a lot in building these kind of layouts easily without much 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>