Question

我有一个使用ZURB Foundation的网页。由于响应式设计，页面在移动设备上崩溃，无需单独的移动页面重定向。然而，一个问题是我的滚动条在计算机上非常棒，但是在移动设备上堆叠起来，使得到达页面底部变得很痛苦。

我如何（使用CSS和Javascript）使得当屏幕尺寸是移动分辨率时滚动条消失，但div实际上会在这种情况下扩展？（当你：隐藏溢出时，它只是隐藏溢出，而不是扩展div）。这是我的一个例子：

<div class="large-4 columns" data-equalizer-watch id="col3" style="font-weight:bold; padding-bottom:20px; max-height:700px; overflow-y: scroll;">
    <h4 style="font-weight:bold; color:white; font-size:x-large; margin-bottom:10px;margin-top:10px;">
        <a style="color:white;" target="_blank" href="mylink.com">EVENTS</a></h4>
    <div id="events"></div><!-- populated via javascript -->
</div>

if($( window ).width() <= 1025){
    alert("mobile screen!");
    $('#col2').css({'overflow' : '', 'overflow-y' : ''});
    $('#col3').css({'overflow' : '', 'overflow-y' : ''});
}

Answer 1

您可以使用@media查询根据直接来自css的屏幕分辨率设置特定的CSS。

以下是一个例子：

<强> CSS：

@media all and (max-width: 1025px) {
    #target{
       height:100%;          // will make the div expand as much as needed with no scrollbar
    }
}

jsfiddle示例：http://jsfiddle.net/r101sjfe/

Answer 2

使用此媒体查询a）从div中删除max-height限制以允许它展开，b）删除滚动条。但首先将CSS放入样式表，或至少放入<style> </style>标签，这样您就不需要使用！important来覆盖内联样式。然后你有：

#col3 {
    font-weight:bold; 
    padding-bottom:20px; 
    max-height:700px; 
    overflow-y: scroll;
}

@media all and (max-width: 480px) {
    #col3 {
        max-height: none;
        overflow-y: auto;
    }
}

480px断点捕获大多数手机但不是全部，因为屏幕尺寸存在巨大差异 - 如果您愿意，可以使用更高的最大宽度。我希望这会给你你想要的东西。

删除Scrollbars，根据屏幕大小展开div

2 个答案: