Question

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

我使用了网络检查员，将我看到的所有内容更改为其他内容，但无法确定问题所在。所以我真的需要帮助，因为我迷路了。

基本理念： http://tympanus.net/Blueprints/SlidePushMenus/

代码托管在我服务器上的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％高度的容器，并且所有溢出的内容都可以滚动。

内容被切断了

1 个答案: