How to put height 100% at the links of a navbar? - html

Question

I'm using twitter-bootstrap, and I have the following code to generate an navbar with an avatar in a dropdown:
Check this fiddle: http://jsfiddle.net/X4drb/embedded/result/
HTML
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <i class="fa fa-bars"></i>
</button> <a class="navbar-brand" href="index.html"><img src="http://placehold.it/30x30&text=logo" ></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Hello
</li>
<li>Stack
</li>
<li>Overflow
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <img id="avatar" class="img-circle mr1" src="http://placehold.it/30x30&text=photo" > John Doe <b class="caret"></b>
<ul class="dropdown-menu">
<li>Settings
</li>
<li>Logout
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
CSS
.caret {
margin-left: 5px;
}
#avatar, .navbar-brand {
margin-right: 5px
}
.navbar-nav {
height: 100%;
margin: 0;
padding 0;
}
But, as you see, the list of the links with Hello, Stack and Overflow doesn't reach the end of the navbar:
Do you have any idea to fix it? I tried putting height: 100%; padding: 0; margin: 0 to the list items of the links, but nothing changes.

Answer 1

Try line-height?
ul.nav.navbar-nav li a:link {
line-height: 32px;
}
http://jsfiddle.net/X4drb/9/

Answer 2

Your ul is not getting proper height. Give the height of ul same as outer div.