Question

我希望有人可以提供帮助。我已将我的身高属性设置为100％，当所有内容同时出现在屏幕上时，这很好。然而，当我需要滚动（当最小化窗口时）身体颜色消失，只留下我为HTML背景设置的颜色。有人知道解决方案吗？

html {
background-color: #07ade0;          
}

body {
background-color: #7968ae;
width: 900px;
margin-left: auto;
margin-right: auto; 
font: 20px verdana, "sans serif", tahoma;
}

Answer 1

如果你的身体设置为height: 100%，那么它将是窗口的100％，这是不理想的，因为如你所提到的，较长页面的背景会被切断。取下高度属性，你应该设置。

您还可以在height: 100%上设置html, body，然后在body内创建一个容器。然后将html样式移至body，将body样式移至新容器。

这是首选，因为在body元素上设置像素宽度通常不是最佳做法。

<强> HTML

<body>
  <div id="container">Your well-endowed content goes here.</div>
</body>

<强> CSS

html, body {
  height: 100%;
}
body {
  background: #07ade0;
}
#container {
  background: #7968ae;
  width: 900px;
  margin-left: auto;
  margin-right: auto;   
  font: 20px verdana, "sans serif", tahoma;
  overflow: hidden;
}

请参阅DEMO。

Answer 2

尝试在您的body元素上将height更改为min-height。这将使body元素为100％，内容太短而无法填充整个内容，并在内容大于浏览器时增长。

滚动时我的身体背景颜色消失了

2 个答案: