Hello,
I am just going through the Responsive Web Design Projects, currently building the Technical Documentation page. I noticed that the example you gave has a small bug in the navigation bar fixed to the left side of the screen.
The navbar contains a header and a list, and its position is fixed. The height of the list is set at 88% and the overflow is set to auto, so it should scroll when its contents do not fit anymore. However, if I make the browser height sufficiently low, the list’s height will become larger than the available space (e.g. browser height = 400px), and the list will not scroll until its last item. I discovered, after many hours, that this is because of the header element taking up additional space from the navbar container.
The solution I found is to either use the calc() function when setting the height of the list, or, more elegantly, use flexbox.
It would have helped a lot to have this example on the provided technical documentation page as I struggled for half a day trying to understand why that strange behaviour was occurring. I appreciate my described example is not exactly real-world, but it’s a good lesson to understand what height percentages actually mean.
So I was wondering if there is any way you could amend the technical documentation page you provide as an example.
Thanks!