html - Navbar bottom view getting cut off when browser window is smaller -


so have navbar , when window full size sits on top of 2 horizontal lines , looks great, when resize smaller view words cut off on bottom. assume has height % i'm stumped. don't understand why 5% magic number sits on top of horizontal line tags when full screen mode?

html:

<center><div class="navbar"><a href= 'ask.php'>ask question</a>       &nbsp;         <a href='index.html'>log out</a>         &nbsp;         <a href= 'search.html'>search</a>        &nbsp;         <a href= 'yourqs.php'>your questions</a>        &nbsp;        <a href= 'test.php'>all questions</a>   <hr><hr></div></center> 

css:

.navbar {     overflow: hidden;     background-color: #333;     position: fixed; /* set navbar fixed position */     top: 0; /* position navbar @ top of page */     width: 100%; /* full width */ height: 5%;   padding-top: 17px; } 

because 5% - in 1000px - , 5% in 100px, not same

you can remove height , set padding-top , padding-bottom div, or set height in 'px'


Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

jquery - Responsive Navbar with Sub Navbar -