In the navigation bar shown in the screenshot, I'm trying to get the height of each of the list items to fill the entire navigation bar and to scale depending on the user's browser size or screen resolution. Can this be done? I've tried adjusting the padding and height of the
<li> tag in the navigation bar but both do not work.
This should get you started: http://www.boldfishdev.com/doctype/zoz/
The ul is a % high and the li's a factor of that, I put a border on the ul so you can see it.
You might want to move the logo out of the list for better effect and maybe set min-height (works for some browsers)
<a> display:block; and set some dimensions on it - percentages perhaps or em's - and set some variable widths on the sidebar and it will all move accordingly.