Question

div.GridViewScrollContainer
{
    overflow:auto;
    position: relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

div.GridViewScrollContainer table
{
    border-spacing:0;
    margin:0;
    border-collapse:collapse;
    padding:0;
}

所以，我在一个div内部渲染一个表格，在某个高度/宽度内部相对定位的元素。大多数情况下.GridViewScrollContainer垂直滚动非常好。

但是，有时候我的桌子只有一两列，桌子和我的垂直滚动条之间有空间看起来很有趣。我只想让我的表填满“.GridViewScrollContainer”中的整个水平空间。

所以，为了实现这一点，我将“width：100％”添加到我的“div.GridViewScrollContainer表”定义中。除了当div具有垂直滚动条时，现在还有一个水平滚动条，仅用于滚动垂直滚动条的宽度。

接下来，我尝试使用以下脚本修复它，而不是“width：100％”，大部分时间都是这样，但DHTML / AJAX意味着我需要在各种情况下调用脚本，我找不到它们。

$(function() {
    $("div.GridViewScrollContainer table").each(function() {
        if ((this.offsetParent.scrollWidth - this.clientWidth) > 2)
            $(this).width("100%");
    });
});

最后，我发现以下问题似乎与我的情况相同，但实际上并没有答案。 Related Question.。有没有人有任何想法...我只想明智地填充div宽度，并在必要时只有垂直/水平滚动条。非常感谢你。

仅限IE7！

Answer 1

您可以使用CSS隐藏水平滚动条。在容器DIV上使用以下CSS：

overflow-x: hidden;

这将消除由表引起的水平滚动条。只需确保表格不会溢出父DIV的宽度。

Answer 2

遗憾的是，CSS没有干净的解决方案。您可以设计像素完美的布局，只需将宽度设置为特定的像素数;你可以用width: 95%来捏造它;或者你可以使用滚动条。不幸的是，我认为这是你最好的选择。

滚动div中的表：填充div，但防止不必要的水平滚动条

2 个答案: