Search form vertically fills navbar - html

Question

I'm trying to put a search form inline within a navbar like so:
But I end up with a navbar like this:
What I'm trying to do is have the green search bar vertically fill the whole navbar. But when I add more padding, the navbar gets more padding also. How can I do it so that the search bar fills the whole navbar like in the first example?
EDIT
Here is the Bootply with static html: http://www.bootply.com/6UyH4u0NWy#

Answer 1

This might get you headed in the right direction using .form-control to set the height of the input.
/* CSS used here will be applied after bootstrap.css */
/* nav */
.navbar-inverse .navbar-nav li a {
padding-top: 15px;
padding-left: 15px;
}
.navbar.navbar-inverse {
background: white;
border-bottom: solid 1px #979797;
}
.navbar-inverse .nav > li > a {
color: #858585;
font-weight: 500;
font-size: 13.5px;
}
.navbar-inverse .nav > li > a:hover,
.navbar .nav > li > a:focus {
color: black;
-webkit-transition: ease 0.2s;
transition: ease 0.2s;
}
.navbar-inverse .navbar-collapse {
border-top: none;
text-align: center;
#media (max-width: 767px) {
background-color: white;
}
}
.navbar-header h4 {
padding: 5px 0 0 10px;
}
.navbar-nav li .search-box {
height: 100%;
margin-top: none;
background-color: #38A6A6;
border: none;
color: white;
border-radius: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: none;
}
.navbar-nav li input.search-query {
height: 100%;
padding-left: 26px;
}
.navbar-nav li form.form-search {
height: 100%;
position: relative;
}
.navbar-nav li form.form-search:before {
height: 100%;
display: block;
width: 14px;
height: 14px;
content: "\e003";
font-family: 'Glyphicons Halflings';
color: white;
background-position: -48px 0;
position: absolute;
top: 16px;
left: 8px;
z-index: 1000;
}
.navbar-nav li .form-control {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<h4>Brand</h4>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>
<form class="form-search form-inline">
<input type="text" class="search-box form-control" placeholder="Recipient's username" aria-describedby="basic-addon2" />
</form>
</li>
</ul>
</div>
</nav>

Answer 2

How about setting the height of .form-search to 100% ? The reason it has this current height is because its scale depends on its content (height:auto by default).
Also notice you got syntax errors in your html (closing li tag before closing form tag).