无法使用 CSS 调整 BODY 宽度

Question

我需要正文具有银色背景并且只填充页面的 75%。也就是说，只有 75% 的页面被涂成银色，而其余部分未使用并根据 broswer 的默认值涂成。页面左侧是我的 BODY，右侧未使用。我试过了

body {
    background-color: silver;
    width: 75%;
}

但还是整个页面都刷成了银色。我怎样才能完成我的任务？

Answer 1

这不是它的工作原理。你可能会使用一个容器作为

<div id="container"></div>
#container{
    background-color: silver;
    width: 75%;
}

Answer 2

您必须为此目的使用容器 div：

body {
  padding: 0;
  margin: 0;
}
div {
  min-height: 100vh;
  background-color: silver;
  width: 75%;
}

<div></div>

另一种方法（如果您不需要内容的右边框）是使用背景渐变：

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  background: -webkit-linear-gradient(left, silver 0%, silver 75%, white 75%);
  background: linear-gradient(to right, silver 0%, silver 75%, white 75%);
}

Answer 3

您需要为 html 和 body 设置背景颜色。

此外，您还为 html 元素设置了 100% 的高度，并为 [=13] 设置了 100% 或 100vh 的 min-height =] 以便它始终填满屏幕的整个高度。

padding: 0 和 margin: 0 很重要，这样您的 body 和 window 之间就没有边界了。

但值得庆幸的是，这仅适用于现代浏览器。我现在无法测试旧版浏览器，但可以假设这在 IE 9 或 10 以下版本中会出现问题。

因此，如果您也想支持旧版浏览器，则需要使用其他答案提供的解决方案，并使用 div 作为内容的容器。

html {
  background-color: white;
  height: 100%;
  padding: 0;
}

body {
  background-color: silver;
  width: 75%;
  min-height: 100%;
  margin: 0;
}

div {
  height: 500px;
  width: 50px;
  background-color: red;
}

<div>
  test
</div>

无法使用 CSS 调整 BODY 宽度

Unable to adjust the BODY width with CSS

css

document-body