6

我希望有人能帮帮忙。我已将我的 body height 属性设置为 100%，当所有内容同时显示在屏幕上时，这很好。但是，当我需要滚动（最小化窗口时）时，主体颜色会消失，只留下我为 HTML 背景设置的颜色。有人知道解决方案吗？

html {
  background-color: #07ade0;
}

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

3 回答 3

17

如果您的 body 设置为height: 100%，那么它将是窗口的 100%，这并不理想，因为正如您所提到的，较长页面上的背景会被截断。去掉 height 属性，你应该被设置。

你也可以同时设置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;
}

见演示。

于 2013-02-19T17:13:34.253 回答
5

尝试改变height你min-height的身体元素。这会使 body 元素 100% 是内容太短而无法填满整个内容，并在内容大于浏览器时增长。

于 2013-02-19T17:41:32.437 回答
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>

看到当你删除内容时 - 列仍然伸展全高

于 2021-11-09T10:03:00.550 回答