如何使用内部元素填充获得完整的身体宽度？

Posted 2023-02-22

【中文标题】如何使用内部元素填充获得完整的身体宽度？

【英文标题】：How to get complete body width with inner elements padding?

【发布时间】：2015-02-03 11:12:48

【问题描述】：

我的这个页面包含一个包含 10-12 个值的表格，每个表格单元格 (td) 都有一些 padding(10px)。获取正文宽度的最佳方法是什么，包括包含padded cells.的表格宽度

我尝试过使用

window.innerWidth(true)
              element.containerWidth

在 JS 中，但它返回我身体的宽度，没有内部元素的填充。

和宽度：CSS 中的 100%。没有任何效果。

编辑： 即使在使用 outerWidth(true) 之后，它也只包含可视区域，而不是总区域或可滚动宽度。可滚动宽度怎么取？

我的代码是

<script>
    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;

    function displayWindowSize() 
        Width = $('body').outerWidth(true);
        Height = $('body').outerWidth(true);
        $('#header-bar').css('width',Width);
        $('#exec2').css('height',Height);
        $('#exec2').css('width', Width);
        $('#exec1').css('width', Width);
        $('#exec1').css('height',Height);
    ;
</script>

【参考方案1】：

使用outerWidth()

$('body').outerWidth()

您还可以通过Click here 更好地了解 Width、OuterWidth、Inner

【讨论】：

即使在使用了 outerWidth() 或 outerWidth(true) 之后，它也只会占用可视区域，而不是总面积或可滚动宽度。可滚动宽度如何取？

【参考方案2】：

您可以使用.outerWidth()

在这种情况下，我会使用 $('body').outerWidth();

如果您需要包含边距，您可以使用 改为$('body').outerWidth(true);

【讨论】：

即使在使用了 outerWidth(true) 之后，它也只会占用可视区域，而不是总区域或可滚动宽度。可滚动宽度如何取？

调整窗口大小时出现问题。它只包含缩小窗口的宽度，而不是可以滚动到的总宽度。

@NischayGulati 如果你的 body 宽度小于它所容纳的元素，你为什么不从这些元素中获取宽度呢？