Question

我需要身体有银色背景，只填充页面的75％。也就是说，只有75％的页面是银色的，而剩下的部分是未使用的，并根据broswer的默认值进行绘制。页面的左侧部分是我的BODY，右侧部分未使用。我试过了

:javascript
  $("#post_delete").on("ajax:success", function(data){
    $("#" + "#{j @post.id.to_s}").fadeOut();
  });

但整个页面仍然是银色的。我怎样才能完成任务？

Answer 1

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

此外，您已将100%的高度设置为html元素，将min-height的{{1}}或100%设置为100vh这样它就会一直填满整个屏幕的高度。

body和padding: 0非常重要，因此您的margin: 0和窗口之间不会有边框。

但请注意，这仅适用于现代浏览器。我现在无法测试旧的浏览器，但它会认为这将在版本9或10以下的IE中出现问题。

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

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;
}

Answer 2

这不是它的工作原理。你可以使用容器作为

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

Answer 3

您必须为此目的使用容器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%);
}

无法使用CSS调整BODY宽度

3 个答案: