怎么做 <body> 标签覆盖全部内容？

Question

我有一个PHP代码，它会生成一个非常大的表，该表不适合屏幕（可以）。 问题是<body>标签不适合浏览器的文档宽度，它仅适合屏幕的宽度。 <table>内容不适合正文。 我看过这里，添加了包装器div。

如何使身体标签具有弹性？

好吧，包装div正确覆盖了页面的宽度，但是<body>标记仍然不能覆盖包装div。

我也在这里看过：

使<body>充满整个屏幕？

并定义这样的CSS：

html, body { margin:0; padding:0; min-width: 100%; }

它没有帮助。

Answer 1

尝试使用以下代码在该CSS代码之前重置整个页面：

* {
padding: 0;
margin: 0;
}

html, body {
    margin:0; padding:0;
    min-width: 100%;
}

那只是一个例子，我鼓励您使用完整的CSS Reset 。 CSS重置非常普遍，几乎在每个网页中都使用过。 从Meyer Web ：

重置样式表的目的是减少浏览器在默认行高，标题的边距和字体大小等方面的不一致。 （...）重置样式经常出现在CSS框架中。

我想说这是重置样式的一种好习惯，它迫使开发团队主动添加要在网络上使用的CSS属性。 （或者，如果您使用框架或预制模板，则要依赖经过此审议过程的人员。）

Answer 2

我不知道这是否行得通，但由于某些浏览器不一致和宽度计算，添加width: 100vw或min-width:100vw可能会有所帮助。

Answer 3

Ryan Hillis指出要使用JavaScript，在这里：

https://stackoverflow.com/a/50154981/

所以我为包装器div分配了一个ID，并具有正确的div计算并使用jquery body宽度重新计算：

            $(function() {
            let usedwidth = $("div#hugewrapper").css("width");
            $("html").css("width", usedwidth);
            $("body").css("width", usedwidth);
        });

我知道这很粗糙，但是有点用。

Answer 4

尝试使用这个； 它应该使HTML和Body标签能够很好地包装所有内容。

html, body {
  width: 100%;
  float: left;
  display: block;
}