Stretching a div's content area to 100% height of the div its in

Stretching a div's content area to 100% height of the div its in
0

#1

This one’s going to be hard to explain, but I’m going to try.

I am creating my own personal webpage for my own uses, and the first thing I need to accomplish is the navigation bar. Here is a snippet of my code:

        body {
          margin: 0;
        }
        
        #pgNav {
          background-color: #ff7f00;
          width: 100%;
          height: 100%;
          padding: 0.01% 0% 0.01% 0%;
        }
        #pgTitle-bg {
          display: inline;
          width: 10%;
        }
        #button {
          display: inline;
        }
        #pgTitle {
          text-shadow: 0px 3px 16px rgba(0, 0, 0, 1);
          margin: 0;
          font-family: Galada;
          font-size: 3em;
          color: white;
          width: 20%;
          display: inline;
          margin-right: 2em;
          margin-left: 1em;
        }
        #button {
          background-color: #bc6700;
        }
        #btn-home {
          color: white;
          font-family: Raleway;
          font-size: 150%;
          padding: .5em .5em .5em .5em;
          display: inline;
        }
        #btn-yt {
          color: white;
          font-family: Raleway;
          font-size: 150%;
          padding: .5em .5em .5em .5em;
          display: inline;
        }
        #btn-gfx {
          color: white;
          font-family: Raleway;
          font-size: 150%;
          padding: .5em .5em .5em .5em;
          display: inline;
        }
        #pgNavXTEND {
          background-color: #bc6700;
          padding-top: 0.5em;
          width: 100%;
        } 
      </style>
    </head>
    <body>
      <div id="pgNav">
        <div id="pgTitle-bg">
          <h1 id="pgTitle">Pumpkin</h1>
        </div>
        <div id="button">
          <h1 id="btn-home">Home</h1>
          <h1 id="btn-yt">YouTube</h1>
          <h1 id="btn-gfx">GFX</h1>
        </div>
      </div>
      <div id="pgNavXTEND">
      </div>

What I’m attempting is to create a div that contains the three buttons, “home, youtube, gfx” and give them a background color that fills the entire height of the orange navigation div container. However, when I attempt height: 100%; it doesn’t seem to affect my page in the slightest. The only thing I can do is put in specific values “%, em, px” in which the size changes upon zooming.

The Question: How can I manipulate the div to stretch to the total height of its parent div?


#2

Instead of using display: inline; use display: inline-block;`

FYI - You should group together the properties for the same id a single id instead of putting some under one id and some more under another id of the same name.

For example, instead of having two #button definitions:

        #button {
          display: inline-block;
        }

        #button {
          background-color: #bc6700;
        }

you would have a single #button definition:

        #button {
          display: inline-block;
          background-color: #bc6700;
        }

This organizes your code better, because everything related to that definition is in the same place.