内容被切断

Question

我正在开发一种最终应该能够响应的设计。 它也应该看起来干净简单。 但是在开发时，我意识到了一些事情：当我在Mac上打开网页-Chrome时，它显示正常。 但是在调整大小或在较小的显示设备上打开同一页面时，底部被切掉了...

我使用了Web检查器，将看到的所有内容都更改为其他内容，但无法确定问题出在哪里。 所以我迷路了，我真的需要帮助。

基本思想： http : //tympanus.net/Blueprints/SlidePushMenus/

演示站点： http : //dev.dragonsinn.tk

该代码托管在我服务器上的Gitlab存储库中； 此处： http : //git.ingwie.me/ingwie/bird3/blob/master/cdn/themes/dragonsinn/css/main.ws.php

问题是，为了简化我的CSS编码，我使用了我自己的CSS框架WingStyle（ http://github.com/IngwiePhoenix/WingStyle ）。 它看起来像CSS，但是为跨浏览器兼容性提供了更好的选择。 因此，不要害怕不太CSS的语法:)

重现该问题：打开上述站点，并调整窗口大小。 然后，通过点击pac-man图标（右上方）打开右侧面板，然后尝试向下滚动。 您应该看不到版本信息。 调整窗口大小，在右侧面板的底部，您可能会看到一个版本字符串（ BIRD@3.0.0-dev... ）。

我怎么可能真正滚动呢？

Answer 1

如果不深入研究代码，建议您按如下方式更改面板css：

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

这将为您提供高度为100％的容器，所有溢出的内容都可以滚动。