CSS / jQuery：当调整容器大小时,如何获得可滚动区域以适当地调整大小？

我正在使用jQuery显示选项卡式区域,并且在选项卡下有一个表格.整个项目(选项卡和表)都可以调整大小.

我希望表格具有滚动条,以便在您调整容器大小时,滚动条也将重新调整大小.

现在,我有两个问题.

1)我希望滚动条从标签的正下方延伸到标签容器对象的底部.我希望在用户调整窗口大小时能够保持动态.但是我无法将滚动条的底部保持在容器底部的正上方

2)整个容器(标签和表格)均可拖动.但这似乎禁用了滚动条的拖动(因此您无法拖动滚动条“电梯”.您必须单击滚动条的箭头或“电梯井”才能移动它.我尝试过jQuery中的“ handle”参数无法正常工作.

确切地说,我包含了所有代码,以便您可以重现该问题.打开此.htm文件,然后尝试拉伸窗口并尝试使用滚动条,您会看到我的问题.将窗口拉大会使滚动条拉离容器底部的距离.

任何帮助的尝试将不胜感激！

编辑->现在,我发现尝试显示可滚动区域已禁用了“单击选项卡”功能.因此,下面的代码实际上存在三个问题-您无法单击该标签并执行任何操作. (使用一个标签,如果单击它,内容应该隐藏.显然,我对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>

最佳答案

好,我在回答我自己的问题.

我能够解决这三个问题,并提出了带有可正确调整大小的滚动条的可拖动选项卡区域.

这是最终代码. 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',"Tab 1");

    </script>
    </body>

原文链接：https://www.f2er.com/css/530751.html

CSS / jQuery：当调整容器大小时,如何获得可滚动区域以适当地调整大小？

猜你在找的CSS相关文章