user2501783 user2501783 - 6 months ago 10
CSS Question

Navigation wont hit bottom of screen

So this might be relatively simple but I'm obviously missing something here. I've probably been looking at it for far too long. I'm trying to make navigation menu go to the bottom of the screen. As of now it only goes down to the space needed to fit all the nav links in blocks.

I'm trying to get the box itself to reach the bottom of the screen, not the 7th nav link. So, the 7th nav link shouldn't be stretching down to fit (it should keep its padding size)...the box containing it should.

HTML

<nav class="navigation">
<ul>
<li class="logo"><h1><a id="nav_logo" href="/index.php">Title</a></h1></li>
<li><a class="nav_link" href="#">1</a></li>
<li><a class="nav_link" href="#">2</a></li>
<li><a class="nav_link" href="#">3</a></li>
<li><a class="nav_link" href="#">4</a></li>
<li><a class="nav_link" href="#">5</a></li>
<li><a class="nav_link" href="#">6</a></li>
<li><a class="nav_link" href="#">7</a></li>
</ul>
</nav>


CSS

*{
margin: 0;
padding: 0;
}

html,body{
font-family: 'PT Sans', sans-serif;
background-color: pink;
color: white;
}

#wrapper{
margin: 0 auto;
min-width: 320px;
max-width: 1600px;
}

h1,h2,h3,h4,h5,h6{
color:#FEBC11;
text-align: center;
}

nav{
width: 100%;
}

nav a{
display: block;
color: white;
text-decoration: none;
padding: .5rem; 0rem;
border-bottom: 1px solid red;
}

nav .nav_link{
text-align: center;
background-color: blue;
width: 240px;
}

nav #nav_logo{
border-bottom: none;
background-color: transparent;
text-decoration: none;
color:#FEBC11;
}

nav .logo h1{
text-align: left;
padding-left: .5rem;
font-size: 1rem;
padding-bottom: .5rem;
padding-top: .5rem;
background-color: #333;
}

nav a:hover{
text-decoration: underline;
}

nav a.current{
background-color: black;
}


Someone tell me what silly thing I missed please XD

https://jsfiddle.net/yoxgksp3/

EDIT: I probably should have mentioned, I want to keep the title bar at the top of the screen.This picture should help get it across. This has nothing to do with mine, but it helps to show http://imgur.com/iIIiNKr

Answer
  1. move the title <li> to a <header> outside of <nav>.
  2. update css replacing nav #nav-logo with header #nav-logo and other ocurrences of former nav (now header)
  3. add this css rule:
nav ul{
   float: left;
   background: blue;
   height: 100vh;
}
  1. and if you don't want scroll to appear, add overflow: hidden inside the html, body css rule.

here's the code:

*{
   margin: 0;
   padding: 0;
}

html,body{
   font-family: 'PT Sans', sans-serif;
   background-color: pink;
   color: white;
   overflow: hidden;
}

#wrapper{
   margin: 0 auto;
   min-width: 320px;
   max-width: 1600px;
}

h1,h2,h3,h4,h5,h6{
   color:#FEBC11;
   text-align: center;
}

nav ul{
   float: left;
   background: blue;
   height: 100vh;
}

nav a{
   display: block;
   color: white;
   text-decoration: none; /* remove underline */
   padding: .5rem; 0rem;
   border-bottom: 1px solid red;
}

nav .nav_link{
   text-align: center; /* center all the links but the KACM */
   background-color: blue;
   width: 240px;
}

header #nav_logo{
   border-bottom: none; /* remove border bottom from KACM */
   background-color: transparent;
   text-decoration: none;
   color:#FEBC11;
}

header.logo h1{
   text-align: left;
   padding-left: .5rem; /* moves KACM to the right from the border */
   font-size: 1rem;
   padding-bottom: .5rem;
   padding-top: .5rem;
   background-color: #333;
}

nav a:hover{
   text-decoration: underline;
}

nav a.current{
   background-color: black;  
}
<header class="logo"><h1><a id="nav_logo" href="/index.php">Title</a></h1></header>
<nav class="navigation">
   <ul>
      <li><a class="nav_link" href="#">1</a></li>
      <li><a class="nav_link" href="#">2</a></li>
      <li><a class="nav_link" href="#">3</a></li>
      <li><a class="nav_link" href="#">4</a></li>
      <li><a class="nav_link" href="#">5</a></li>
      <li><a class="nav_link" href="#">6</a></li>
      <li><a class="nav_link" href="#">7</a></li>                           
   </ul>
</nav>