出现滚动条时jQuery窗口调整大小问题答案

【问题标题】：jQuery window resize issue while scrollbar appears出现滚动条时jQuery窗口调整大小问题
【发布时间】：2014-05-05 10:42:44
【问题描述】：

当我显示页面 index.php 时，只有 4 列的 div id .box 出现而不是 5. .从另一边看，当我 MINIMIZE 和 MAXIMALIZE the window 时，会出现 THE div id .box 的 5 列。我花了大约 4 个小时，我注意到一切都很好，而不是 put overflow:auto;到#panel 我把溢出：滚动；。然后一切都很好。在页面加载时，我得到了所有 5 列，在最小化和最大化窗口时，我也得到了 5 列。但我不想让这个栏从溢出：滚动到#kontener 的底部。还有另一种方法吗？我投票赞成。谢谢！ /编辑我忘了说，如果页面上只有一些框，直到滚动条出现之前没有那么多框，一切都很好。

不工作示例：http://jsfiddle.net/MtUWn/509/

我有以下代码：样式.css

#panel{position:absolute;top:72px;left:0px;right:0px;bottom:50px;overflow:auto;}/*overflow:scroll;*/
    #kontener{overflow:hidden;}
    .box {display:block;float:left;}
    .box_in {margin:5px;padding:5px;height:260px;border:1px solid grey;}

index.php

<script type="text/javascript">

    function onResize() {
        var cw = $('#kontener').width();
        $(".box").width(cw / 5);
    }

    $(window).load('resize', onResize);
    $(window).bind('resize', onResize);

</script>

<div id="panel">    
    <div id="kontener">
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
    </div>
</div>

【问题讨论】：

恐怕我不太明白你的问题，我在你的 jsfiddle 中看不到问题，它似乎对我有用。我能问一下你在这里想要达到什么目的，每行只显示 5 个框吗？盒子有固定的高度吗？是否需要滚动条？为什么#panel 是绝对定位的？您是否有理由不能将纯 CSS 与 width: 20% 一起使用以使框始终为宽度的 1/5 而无需使用 jQuery？
我刚刚意识到你说你不想要滚动条，我只是不明白你到底想要最终的外观是什么。谢谢！
一个示例，说明如何使用 CSS 制作 5 个框，而不知道您的其他要求是什么：jsfiddle.net/MtUWn/511
+Sarah，很好，但在您的示例中，表格也应该像我的示例一样适合右侧。但要做到这一点，您需要调整窗口大小。你调整窗口大小了吗？我都做了。我忘了输入我的代码“ $(document).load('resize', onResize); $(document).bind('resize', onResize);” :)
“适合右侧”是什么意思？

标签： jquery css resize window scrollbar

【解决方案1】：

您可以在不需要 jQuery 的情况下制作相同的效果，只需在 .box 上使用 width: 20% 即可（参见问题 cmets）

http://jsfiddle.net/MtUWn/516/

【讨论】：