删除滚动条，根据Screensize展开div

Question

I have a web page that uses ZURB Foundation. Thanks to the responsive design, the page collapses on mobile without needing a separate mobile page redirect. One issue however, is that I have scrollbars that are great on computers, but stack on top of each other for mobile, making reaching the bottom of the page a pain.

How can I (using CSS and Javascript) make it so that when the screen size is a mobile resolution that the scrollbars disappear, but the divs actually expand when this occurs? (When you :hide the overflow it simply hides the overflow, instead of expanding the div). Here is an example of what I have:

<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

You can use @media query to set a specific css depending on the resolution of the screen directly from css.

Here is an example:

CSS:

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

jsfiddle example: http://jsfiddle.net/r101sjfe/

Answer 2

Use this media query to a) remove the max-height restriction from the div to allow it to expand and b) remove the scroll bars. But first put your CSS into a stylesheet, or at least into <style> </style> tags, so you don't need to use !important to override your inline styles. You then have:

#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;
    }
}

The 480px breakpoint captures a majority of mobiles but not all of them as there is a huge variation in screen sizes - use a higher max-width if you prefer. I hope this gives you what you want.