msamprz msamprz - 7 months ago 54
HTML Question

jQuery height function not working

I've run into issue with jQuery, when I set the height of a div to window height, using the code at JS Bin, it works, but then when I reduce the window height by manually reducing size of my browser, it gets chopped off, the extra portion of the div goes out of screen.

I set it up on JS Bin
If you resize the browser window, you will notice that list number 3 (and so on) will be out of the screen. I can't wrap my head around why it happens, I've tried changing jQuery version, I've double triple checked the code, I can't find anything wrong with it. I've rewritten it too, still not working. I searched on another forum, they told me to add a jQuery resize function, and that proved to me that they hadn't even took a look at my code, because I already have that function, but it's like the setHeight function is not being executed on window resize. Please advise.

Answer

Actually you don't need any scripts to achieve what you want. Heres only css solution - https://jsbin.com/xopamakiru/1/edit?html,css,js,output

Your navbar is position: fixed it positioned relative to the body, so you can simply add height: 100% and it will take whole height of viewport. You need to add same height to children elements so they will be 100% height of nav bar. You have 3 li elements (100% /4 = ~33.33%), so adding height: 33.33% to it makes them equal height. Because of we are using percents, element's heights resize automatically when user resizes window.