Vertical Spacing Within A Div Tag - html

Question

I've been working on a website in which you can access the information for many different songs, including artist, album, length, etc. On the homepage, I have a navigation bar fixed to the left of the screen(25% in width). It has a home link, and a link to every letter(the songs are organized in sections based on their first letter). In a perfect world, I would want all these links to fit perfectly vertical in this div, however this is not the case. When I open the website on different screens, there is always different amounts of 'excess' below the 'Z'.
The navigation bar looks a little like this:
Home
A
B
C
D
...
Z
(This is where the unused space is)
Here is my code:
html,
body {
margin: 0;
}
/* Navigation Menu Styling */
ul.main-menu {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.main-menu li a {
display: block;
color: #000;
padding: 7.45px 0 7.45px 16px;
text-decoration: none;
}
ul.main-menu li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Text Styling */
h1,
h2,
p {
font-family: Calibri
}
p a:link,
p a:visited {
font-family: Times New Roman;
color: black;
text-decoration: none;
}
p a:hover {
color: red;
}
<ul class="main-menu">
<li><a class="active" href="#home">Home</a>
</li>
<li>A
</li>
<li>B
</li>
<li>C
</li>
<li>D
</li>
<li>E
</li>
<li>F
</li>
<li>G
</li>
<li>H
</li>
<li>I
</li>
<li>J
</li>
<li>K
</li>
<li>L
</li>
<li>M
</li>
<li>N
</li>
<li>O
</li>
<li>P
</li>
<li>Q
</li>
<li>R
</li>
<li>S
</li>
<li>T
</li>
<li>U
</li>
<li>V
</li>
<li>W
</li>
<li>X
</li>
<li>Y
</li>
<li>Z
</li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h1 id="home">Welcome To Name That Artist</h2>
<p> You can find information about a song from the wide selection we offer.</p>
<h3>Use the navigation bar to jump to a letter or search for a specific song.</h3>
<hr id="a_songs"/><p align="center">A</p><hr/>
<div>
<p>
<a id="all_of_me_john_legend" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
</p>
</div>
<hr id="b_songs"/><p align="center">B</p><hr/>
<div>
<p>
<a id="bad_blood_bastille" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
</p>
</div>
<hr id="c_songs"/><p align="center">C</p><hr/>
<div>
<p>
<a id="cake_by_the_ocean_dnce" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
</p>
</div>
<hr id="d_songs"/><p align="center">D</p><hr/>
<div>
<p>
<a id="dont_stop_believin_journey" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
</p>
</div>
<hr id="e_songs"/><p align="center">E</p><hr/>
<div>
<p>
<a id="eye_of_the_tiger_survivor" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
</p>
</div>
<hr id="f_songs"/><p align="center">F</p><hr/>
<div>
<p>
<a id="feel_good_robin_thicke" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
</p>
</div>
<hr id="g_songs"/><p align="center">G</p><hr/>
<div>
<p>
<a id="geronimo_sheppard" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
</p>
</div>
<hr id="h_songs"/><p align="center">H</p><hr/>
<div>
<p>
<a id="here_alessia_cara" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
</p>
</div>
<hr id="i_songs"/><p align="center">I</p><hr/>
<div>
<p>
<a id="i_write_sins_not_tragedies_panic_at_the_disco" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
</p>
</div>
<hr id="j_songs"/><p align="center">J</p><hr/>
<div>
<p>
<a id="just_give_me_a_reason_pink" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
</p>
</div>
<hr id="k_songs"/><p align="center">K</p><hr/>
<div>
<p>
<a id="kill_of_the_night_gin_wigmore" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
</p>
</div>
<hr id="l_songs"/><p align="center">L</p><hr/>
<div>
<p>
<a id="latch_disclosure" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
</p>
</div>
<hr id="m_songs"/><p align="center">M</p><hr/>
<div>
<p>
<a id="me_and_my_broken_heart_rixton" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
</p>
</div>
<hr id="n_songs"/><p align="center">N</p><hr/>
<div>
<p>
<a id="the_nights_avicci" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
</p>
</div>
<hr id="o_songs"/><p align="center">O</p><hr/>
<div>
<p>
<a id="on_my_mind_ellie_goulding" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
</p>
</div>
<hr id="p_songs"/><p align="center">P</p><hr/>
<div>
<p>
<a id="paradise_coldplay" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
</p>
</div>
<hr id="q_songs"/><p align="center">Q</p><hr/>
<div>
<p>
</p>
</div>
<hr id="r_songs"/><p align="center">R</p><hr/>
<div>
<p>
<a id="rather_be_clean_bandit" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
</p>
</div>
<hr id="s_songs"/><p align="center">S</p><hr/>
<div>
<p>
<a id="secrets_coldplay" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
</p>
</div>
<hr id="t_songs"/><p align="center">T</p><hr/>
<div>
<p>
<a id="this_is_how_we_do_katy_perry" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
</p>
</div>
<hr id="u_songs"/><p align="center">U</p><hr/>
<div>
<p>
<a id="uma_thurman_fall_out_boy" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
</p>
</div>
<hr id="v_songs"/><p align="center">V</p><hr/>
<div>
<p>
<a id="victorious_panic_at_the_disco" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
</p>
</div>
<hr id="w_songs"/><p align="center">W</p><hr/>
<div>
<p>
<a id="want_to_want_me_jason_derulo" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
</p>
</div>
<hr id="x_songs"/><p align="center">X</p><hr/>
<div>
<p>
<a id="xo_the_eden_project" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
</p>
</div>
<hr id="y_songs"/><p align="center">Y</p><hr/>
<div>
<p>
<a id="you_know_you_like_it_dj_snake" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
</p>
</div>
<hr id="z_songs"/><p align="center">Z</p><hr/>
<div>
<p>
</p>
</div>
</div>

Answer 1

You may use display:flexon ul and flex:1; on li, so they spray evenly on the whole area avalaible (or shrink on themselves).
edit : added an extra level of flexbox to wrap all letters at screen
snippet updated and DEMO to play with and fork
html,
body {
margin: 0;
}
/* Navigation Menu Styling */
ul.main-menu {
display: flex;
flex-flow: column wrap;
}
ul.main-menu li {
flex: 1;
display:flex;
align-items:center;
}
ul.main-menu li a {
padding: 0.25em 0.5em;
flex:1;
}
/* end flex model */
ul.main-menu {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.main-menu li a {
display: block;
color: #000;
text-decoration: none;
}
ul.main-menu li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Text Styling */
h1,
h2,
p {
font-family: Calibri
}
p a:link,
p a:visited {
font-family: Times New Roman;
color: black;
text-decoration: none;
}
p a:hover {
color: red;
}
<ul class="main-menu">
<li><a class="active" href="#home">Home</a>
</li>
<li>A
</li>
<li>B
</li>
<li>C
</li>
<li>D
</li>
<li>E
</li>
<li>F
</li>
<li>G
</li>
<li>H
</li>
<li>I
</li>
<li>J
</li>
<li>K
</li>
<li>L
</li>
<li>M
</li>
<li>N
</li>
<li>O
</li>
<li>P
</li>
<li>Q
</li>
<li>R
</li>
<li>S
</li>
<li>T
</li>
<li>U
</li>
<li>V
</li>
<li>W
</li>
<li>X
</li>
<li>Y
</li>
<li>Z
</li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h1 id="home">Welcome To Name That Artist</h2>
<p> You can find information about a song from the wide selection we offer.</p>
<h3>Use the navigation bar to jump to a letter or search for a specific song.</h3>
<hr id="a_songs"/><p align="center">A</p><hr/>
<div>
<p>
<a id="all_of_me_john_legend" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
</p>
</div>
<hr id="b_songs"/><p align="center">B</p><hr/>
<div>
<p>
<a id="bad_blood_bastille" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
</p>
</div>
<hr id="c_songs"/><p align="center">C</p><hr/>
<div>
<p>
<a id="cake_by_the_ocean_dnce" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
</p>
</div>
<hr id="d_songs"/><p align="center">D</p><hr/>
<div>
<p>
<a id="dont_stop_believin_journey" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
</p>
</div>
<hr id="e_songs"/><p align="center">E</p><hr/>
<div>
<p>
<a id="eye_of_the_tiger_survivor" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
</p>
</div>
<hr id="f_songs"/><p align="center">F</p><hr/>
<div>
<p>
<a id="feel_good_robin_thicke" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
</p>
</div>
<hr id="g_songs"/><p align="center">G</p><hr/>
<div>
<p>
<a id="geronimo_sheppard" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
</p>
</div>
<hr id="h_songs"/><p align="center">H</p><hr/>
<div>
<p>
<a id="here_alessia_cara" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
</p>
</div>
<hr id="i_songs"/><p align="center">I</p><hr/>
<div>
<p>
<a id="i_write_sins_not_tragedies_panic_at_the_disco" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
</p>
</div>
<hr id="j_songs"/><p align="center">J</p><hr/>
<div>
<p>
<a id="just_give_me_a_reason_pink" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
</p>
</div>
<hr id="k_songs"/><p align="center">K</p><hr/>
<div>
<p>
<a id="kill_of_the_night_gin_wigmore" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
</p>
</div>
<hr id="l_songs"/><p align="center">L</p><hr/>
<div>
<p>
<a id="latch_disclosure" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
</p>
</div>
<hr id="m_songs"/><p align="center">M</p><hr/>
<div>
<p>
<a id="me_and_my_broken_heart_rixton" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
</p>
</div>
<hr id="n_songs"/><p align="center">N</p><hr/>
<div>
<p>
<a id="the_nights_avicci" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
</p>
</div>
<hr id="o_songs"/><p align="center">O</p><hr/>
<div>
<p>
<a id="on_my_mind_ellie_goulding" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
</p>
</div>
<hr id="p_songs"/><p align="center">P</p><hr/>
<div>
<p>
<a id="paradise_coldplay" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
</p>
</div>
<hr id="q_songs"/><p align="center">Q</p><hr/>
<div>
<p>
</p>
</div>
<hr id="r_songs"/><p align="center">R</p><hr/>
<div>
<p>
<a id="rather_be_clean_bandit" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
</p>
</div>
<hr id="s_songs"/><p align="center">S</p><hr/>
<div>
<p>
<a id="secrets_coldplay" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
</p>
</div>
<hr id="t_songs"/><p align="center">T</p><hr/>
<div>
<p>
<a id="this_is_how_we_do_katy_perry" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
</p>
</div>
<hr id="u_songs"/><p align="center">U</p><hr/>
<div>
<p>
<a id="uma_thurman_fall_out_boy" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
</p>
</div>
<hr id="v_songs"/><p align="center">V</p><hr/>
<div>
<p>
<a id="victorious_panic_at_the_disco" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
</p>
</div>
<hr id="w_songs"/><p align="center">W</p><hr/>
<div>
<p>
<a id="want_to_want_me_jason_derulo" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
</p>
</div>
<hr id="x_songs"/><p align="center">X</p><hr/>
<div>
<p>
<a id="xo_the_eden_project" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
</p>
</div>
<hr id="y_songs"/><p align="center">Y</p><hr/>
<div>
<p>
<a id="you_know_you_like_it_dj_snake" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
</p>
</div>
<hr id="z_songs"/><p align="center">Z</p><hr/>
<div>
<p>
</p>
</div>
</div>

Answer 2

I think I would use relative sizing on the height to do this. Basically, set the height and font-size of the links to a percentage of the viewport with the vh unit of measure.
https://jsfiddle.net/6ksL4845/
ul.main-menu li a {
display: block;
color: #000;
text-decoration: none;
height:3.3vh;
font-size:3vh;
padding:0.2vh 5%;
}
Also, an unsolicited suggestion to simplify your markup (also shown in fiddle:
you might change:
<hr id="a_songs"/><p align="center">A</p><hr/>
to:
<p id="a_songs" class="letter_heading"/>A</p>
and add this to your CSS:
.letter_heading {
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
padding:15px 0px;
text-align:center;}