Question

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

how to make body tag elastic?

好吧，包装器div正好覆盖了页面的宽度，但<body>标签仍未覆盖包装器div。

我也看过这里：

Make <body> fill entire screen?

并定义了这样的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重置。 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;
}

如何制作代码以涵盖整个内容？

4 个答案: