CSS/jQuery：当容器重新调整大小时，如何让可滚动区域正确调整大小？答案

【问题标题】：CSS/jQuery: How can I get a scrollable area to re-size properly when the container is re-sized?CSS/jQuery：当容器重新调整大小时，如何让可滚动区域正确调整大小？
【发布时间】：2010-09-12 08:08:23
【问题描述】：

我正在使用 jQuery 来显示一个选项卡区域，并且我在选项卡下方有一个表格。整个东西，标签和表格，都可以重新调整大小。

我希望表格有一个滚动条，这样当您重新调整容器大小时，滚动条也会重新调整大小。

现在，我有两个问题。

1) 我希望滚动条从选项卡正下方延伸到选项卡容器对象的底部。当用户重新调整窗口大小时，我希望它是动态的。但是我不能将滚动条的底部恰好保持在容器底部的上方

2) 整个容器（选项卡和表格）都是可拖动的。但这似乎禁用了滚动条的拖动（因此您无法拖动滚动条-“电梯”..您必须单击箭头或滚动条的“电梯轴”才能移动它。我试过了jQuery 中的 'handle' 参数无法正常工作。

为了彻底，我已经包含了所有代码，以便您可以重现问题。打开这个 .htm 文件，尝试拉伸窗口并尝试使用滚动条，您会看到我的问题。将窗口拉大会使滚动条远离容器底部。

非常感谢任何帮助的尝试！

Edit--> 我现在看到我尝试显示可滚动区域已禁用“单击选项卡”功能。所以下面的代码实际上有三个问题——你不能点击标签并获得任何动作。（使用一个选项卡，如果单击它，内容应该隐藏。显然我的 div 覆盖破坏了该功能！）

<html><head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</script>


<style type="text/css">
#grid-tabs {
    width: 720px;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 185px;
}
.outer-container{
    height:         100%;
    position:       relative;
    top:            -45px;
}
.filler{
    height:         60px;
    position:       relative;
    top:            -60px;
}
.inner-container{
    height:         auto;
    overflow-y:     scroll;
    position:       relative;
    top:            -15px;
}
.scroll-area{
    height:         70%;
    position:       relative;
    top:            0px;
}
table{
    border:1px solid #62bbe8;
}
td {
    width: 50px;
}

</style>
</head><body>

<div id='grid-tabs'>
    <ul>
    </ul>

    <div class='outer-container'>
        <div class='filler'>
        </div>
        <div class='inner-container'>
            <div class='scroll-area'>
            <table class='content'>
                <tbody>
                    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
                    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
                    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
                    <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
                    <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
                    <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
                    <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
                    <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
                    <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
                    <tr><td>A.1</td><td>A.2</td><td>A.3</td></tr>
                    <tr><td>B.1</td><td>B.2</td><td>B.3</td></tr>
                    <tr><td>C.1</td><td>C.2</td><td>C.3</td></tr>
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery('#grid-tabs').tabs({collapsible:true}).draggable().resizable();
    jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1");

</script>
</body>

【问题讨论】：

您也可以查看此主题，以平滑调整大小。 stackoverflow.com/questions/244758/…

标签： jquery css jquery-ui scroll

【解决方案1】：

好的，我正在回答我自己的问题。

我能够解决这三个问题，并提出了一个可拖动的选项卡区域，其中的滚动条可以正确调整大小。

这是最终代码。 See it in action at JS Bin.

注意这一行中包含的魔法：

        jQuery('#grid-tabs').tabs({collapsible:true})
            .draggable({handle:'ul'})
            .resizable({alsoResize:'.container'});

也调整大小！这就是诀窍。并让“ul”成为我的句柄（这意味着它可以被选项卡部分拖动），现在滚动条可以正常工作了。

完美！希望这对某人有所帮助...

    <html><head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
    </script>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
    </script>


    <style type="text/css">
    #grid-tabs {
        width: 720px;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 185px;
    }
    .container{
        height:         auto;
        overflow-y:     scroll;
        position:       relative;
        top:            0px; /* changed */
    }
    .scroll-area{
        height:         70%;
        position:       relative;
        top:            0px;
    }
    table{
        border:1px solid #62bbe8;
    }
    td {
        width: 50px;
    }

    </style>
    </head><body>

    <div id='grid-tabs'>
        <ul>
        </ul>

            <div class='container'>
                <div class='scroll-area'>
                <table class='content'>
                    <tbody>
                        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
                        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
                        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
                        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
                        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
                        <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
                        <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
                        <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
                        <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
                        <tr><td>A.1</td><td>A.2</td><td>A.3</td></tr>
                        <tr><td>B.1</td><td>B.2</td><td>B.3</td></tr>
                        <tr><td>C.1</td><td>C.2</td><td>C.3</td></tr>
                    </tbody>
                </table>
                </div>
            </div>

    </div>

    <script type="text/javascript">
        jQuery('#grid-tabs').tabs({collapsible:true}).draggable({handle:'ul'}).resizable({alsoResize:'.container'});
        jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1");

    </script>
    </body>

【讨论】：