Content gets cut off

Question

I am developing a design that is supposed to become responsive in the end. It also is supposed to look clean and simple. But while developing, I realized something: When I open the page on my Mac - Chrome - it displays fine. But upon resizing it, or opening the same page on a smaller display device, the bottom is cut off...

I have used the web inspector, changed everything that I saw to something else but couldn'T figure out where the problem is. So I really need help here, as I got lost.

The basic idea: http://tympanus.net/Blueprints/SlidePushMenus/

The demo site: http://dev.dragonsinn.tk

The code is hosted on a Gitlab repo on my server; here: http://git.ingwie.me/ingwie/bird3/blob/master/cdn/themes/dragonsinn/css/main.ws.php

The problem is, that in order to simplify my CSS coding, I used my self-made CSS framework, WingStyle ( http://github.com/IngwiePhoenix/WingStyle ). It is meant to look like CSS, but offer better options for cross-browser compatiblity. So don'T get scared of the not-quite-CSS syntax :)

To reproduce the problem: Open the site mentioned above, and resize your window. Then, open the right panel by hitting the pac-man icon (top right) and try to scroll down. You should not be able to see the version information. Resize the window, and at the bottom of the right panel, you may see a version string ( BIRD@3.0.0-dev... ).

How can I it possible, that it actually does scroll?

Answer 1

Without studying your code to deeply I'd suggest you change your panel css as follows:

.panel-side { 
    width: 240px; 
    /* height: 100%; replaced with bottom: 0*/ 
    top: 0; 
    bottom: 0;
    z-index: 1000; 
    overflow-y: auto; 
}

This will give you a 100% percent height container and all overflowing content will be scrollable.