Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
161
rated 0 times [  166] [ 5]  / answers: 1 / hits: 38714  / 11 Years ago, sat, november 16, 2013, 12:00:00

I am designing a website using css and html. I have managed to get a navigation bar on the left side of my page using this css, however when the screen is scrolled down the navigation bar no longer continues.



#navbar {
background: #a8a599;
float: left;
width: 20%;
height: 100%;
}


However i would like to make the height of the navigation bar the height of the document. I feel like i might need java script for this, however i am new to java-script, so i am not sure how i would accomplish this. I thought making the height 100% would make it take up the whole page, owever it only takes up the visible part of the page.



Here it is on fiddle if you want to look at the rest of the page
http://jsfiddle.net/HRpXV/3/embedded/result/


More From » html

 Answers
91

100% does not apply because it is floated. Change the parent container to position: relative and the navbar to position: absolute will solve the problem.



#container{
position: relative;
}

#navbar {
background: #a8a599;
/*float: left; Instead of float, use absolute position*/
position: absolute;
width: 20%;
height: 100%;
}


Demo


[#74252] Thursday, November 14, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;