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?