当滚动页面时，我的网页背景颜色消失了。

Question

当滚动页面时，我的网页背景颜色消失了。

7

我希望有人能帮助我。我将身体高度属性设置为100％，当所有内容同时显示在屏幕上时效果很好。但是，当我需要滚动页面（缩小窗口）时，正文的颜色会消失，只留下我为HTML背景设置的颜色。有谁知道解决方法吗？

html {
  background-color: #07ade0;
}

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

- KAY DEE EMM

请提供一些标记和相关的CSS。根据您的评论，似乎您遇到了溢出问题。因此，如果不知道页面的布局方式，就没有真正的帮助方法。也许您有一些浮动或绝对定位的内容？ - Torsten Walter

你有一个我们可以查看的页面吗？从那里诊断应该很容易。 - mhps

3个回答

6

尝试将身体元素的height更改为min-height。这将使身体元素在内容太短而无法填满整个页面时保持100％，并在内容大于浏览器时增长。

- Shauna

1

这个不起作用。只是让我的身体完全消失了。这是我的实时测试页面：http://www.kay-dee-emm.com/Test - KAY DEE EMM

0

当页面上没有内容时，接受的答案并不能解决问题，那么该列将根本不可见。

最终有效的解决方法是引入一个包装器并添加 display: table; 。

我的解决方案不仅在有内容时覆盖列背景颜色，而且在没有内容时也是如此。

http://jsfiddle.net/h83gtmbc/6/

html, body {
    height: 100%;
}
body {
    background: #07ade0;
    padding: 0;
    margin: 0;
}

#wrapper {
height: 100%;  
}

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

<div id="wrapper">
<div id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam malesuada lectus in ornare. Nam et turpis magna, eget hendrerit nisi. Sed tincidunt felis pulvinar neque hendrerit eu sollicitudin nulla iaculis. Praesent convallis mattis magna, et tempor sapien euismod molestie. Praesent metus nisl, varius in vulputate vel, vestibulum at eros. In hac habitasse platea dictumst. Vivamus vitae turpis lectus. Praesent at tortor sit amet est lacinia porta. Duis sit amet nunc sem. Nam vel sapien a ligula vulputate sollicitudin sed at eros. Nam non urna felis. Ut quis euismod ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam felis lectus, vestibulum et fringilla in, elementum ut libero. Integer rutrum nibh a nulla pulvinar nec fermentum justo dapibus.

Integer ut massa ut diam accumsan pulvinar vitae ut metus. Nullam consectetur porttitor nunc, ac malesuada erat rhoncus a. Morbi laoreet vehicula lacinia. Aliquam pellentesque lacus non tellus fringilla at condimentum est condimentum. Sed consequat venenatis dui id egestas. Aliquam suscipit cursus odio non dictum. Mauris ipsum sapien, luctus quis pretium ac, suscipit sit amet neque. Mauris iaculis rutrum dui in lobortis.

Donec sem enim, tempor non cursus at, aliquam pretium ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis in suscipit neque. Vivamus ac augue pulvinar augue condimentum iaculis. Quisque vel augue dolor. Mauris sollicitudin porttitor tristique. Duis consectetur volutpat egestas. Donec quis tortor justo, ac accumsan ligula. Morbi sit amet magna diam. Mauris lectus ante, cursus nec bibendum ac, mattis ultricies nulla. Aliquam dui odio, elementum quis faucibus ac, tristique vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Pellentesque velit velit, dapibus imperdiet ullamcorper in, dapibus sed libero. Cras dapibus, dui in tincidunt feugiat, lacus tellus suscipit urna, nec fermentum ipsum massa eu quam. Sed nisl quam, dictum eget tempus id, ullamcorper quis libero. Suspendisse rutrum pretium tellus ac semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque imperdiet dui quis dui euismod aliquet. Etiam sit amet semper dolor. Donec et mattis tellus. Proin ac mi risus. Aenean sit amet nunc scelerisque neque egestas adipiscing non eu diam.

Quisque feugiat scelerisque commodo. Sed tellus nulla, fermentum a rutrum ut, vulputate et turpis. Proin at libero quis metus pellentesque dapibus. Proin nec pretium orci. Pellentesque bibendum mollis lacus vel faucibus. Integer malesuada, dolor quis iaculis laoreet, velit mi mattis turpis, vestibulum lacinia augue felis ac erat. Etiam tristique turpis sit amet nibh adipiscing vel bibendum metus vulputate. Integer mattis nulla metus, vitae viverra nisl.</div>
</div>

请注意，当您删除内容时，该列仍会自动拉伸至全高。

- Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zxqx · Accepted Answer

如果你的身体设置为 height: 100%，那么它将占据整个窗口高度，这并不理想，因为在较长的页面上，背景会被裁剪掉，正如你所提到的。去掉高度属性就可以了。

你也可以在 html,body 上设置 height: 100%，然后在 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;
}

请查看演示。