How to make height 100% or more, to fit content?

I tried various combinations of height and min-height, none of them seem to work.

HTML

<body>
  <div id="header">
    Bootstrap's header
  </div>

  <div id="divHome" class="page">
    <div id="divHomeCenter">
      <h1>My Awesome App</h1>
    </div>
  </div>

  <div id="divAbout" class="page">
    <div id="divAboutCenter">
      <h1>Why This App Is Awesome</h1>

      <div class="row">
        <div>
          <h3>Reason 1</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum arcu at ante tempor, a pretium sem posuere. In hac habitasse platea dictumst. Integer lectus odio, porttitor et libero ac, mattis commodo risus. Morbi sit amet orci lacinia, feugiat nulla eu, tincidunt lacus. Fusce semper, neque vel iaculis mollis, lorem risus ultricies enim, quis congue metus neque a nibh. Curabitur ut turpis rutrum, volutpat odio quis, fringilla risus. Aliquam erat volutpat. Proin eget risus pretium, malesuada risus id, feugiat magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, ex ac varius aliquet, nisl nunc finibus nisl, at finibus odio neque a nulla.
          </p>
          <button>Sign Up</button>
        </div>
        <div>
          <h3>Reason 1</h3>
          <p>
            Nunc sed diam ac dui fringilla maximus. Mauris dignissim tincidunt nunc, vitae pulvinar nibh maximus eu. Aliquam eleifend libero non pharetra varius. Cras eleifend sagittis lectus, vel commodo mi mollis vel. Quisque tempus interdum mi, eget vulputate ligula feugiat tincidunt. Integer et diam gravida, vulputate tortor ac, tincidunt lectus. Nunc ac nisi felis. Aliquam ac felis sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend ex neque, at sagittis ipsum venenatis in. Vivamus ac consequat arcu. Sed sit amet risus a elit viverra venenatis sed vel ligula. Curabitur tincidunt malesuada augue at suscipit. Nam semper tristique ultrices. Sed in lorem sem.
          </p>
          <button>Sign Up</button>
        </div>
        <div>
         ...

CSS

body {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  margin: 0;
}

#divAbout {
  background-color: white;
}

#divDownload {
  background-color: lightgoldenrodyellow;
}

#header {
  margin: 0;
  height: 50px;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  width: 100%;
}

.page {
  text-align: center;
}

#divHome {
  background-color: lightblue;
}

#divHomeCenter {
  max-width: 700px;
  background-color: rgba(255,255,255,0.35);
  border-radius: 20px;
  padding: 10px 40px;
  margin: 0 auto;
  position: relative;
  top: 200px;
}

#divDownloadCenter {
  padding-top: 150px;
}

html, body, .page {
  height: 100%;  
}