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.
答案 0 :(得分：1)
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% / 3 = ~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.