7

I hope someone can help. I've set my body height property to 100% which is fine when all the content is on the screen at one time. However when i need to scroll (when minimizing the window) the body color disappears, leaving just the color i set for the HTML background. Does anybody know a solution?

html {
  background-color: #07ade0;
}

body {
  background-color: #7968ae;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  font: 20px verdana, "sans serif", tahoma;
}
koloml
  • 525
  • 2
  • 15
KAY DEE EMM
  • 85
  • 1
  • 1
  • 6
  • Please provide some markup and the css in question. According to your comments it seems you are experiencing an overflow problem. So Without knowing how your page is laid out there isn't really a way to help you. Maybe you have some floated or absolutely positioned content? – Torsten Walter Feb 19 '13 at 17:24
  • Do you have a page we could look at? Should be pretty easy to diagnose from there. – mhps Feb 19 '13 at 17:28

3 Answers3

17

If your body is set to height: 100%, then it will be 100% of the window, which is not ideal since the background on longer pages will get cut off, as you mentioned. Take off the height property and you should be set.

You can also set height: 100% on both html, body and then create a container within your body. Then move your html styles to body, and your body styles to the new container.

This is preferred, since it is not generally considered best practice to set a pixel width on your body element.

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

See DEMO.

zxqx
  • 5,115
  • 2
  • 20
  • 28
  • When i do that the background color disappears entirely leaving just the HTML colour. Here's my code if that shows any errors: html { background: #07ade0; } body { background: #7968ae; width: 900px; margin-left: auto; margin-right: auto; font: 20px verdana, "sans serif", tahoma; } – KAY DEE EMM Feb 19 '13 at 17:21
  • Instead of applying `background` to your `html` element, I would suggest you create a container inside of `body`, and then move your `html` styles to `body`, and your `body` styles to the new container. Then add `height: 100%` to both `html` and `body`. See here: http://jsfiddle.net/zaknotzak/TVdxK/1/ – zxqx Feb 19 '13 at 17:32
  • Still doesn't seem to work. i'm now using a container, but what i'm getting now is the [html] background color overriding the [body] color – KAY DEE EMM Feb 19 '13 at 17:57
  • There shouldn't be a `background` on the `html` element. There should only be a background on your `body` and container elements. – zxqx Feb 19 '13 at 17:59
  • sorry that is what i meant, i'm using body and container. Could there be an issue where I have used Float and Position properties in my divs? – KAY DEE EMM Feb 19 '13 at 18:08
  • Will do! I'll complete what i need to do and make it live, before posting a link. I imagine i've done something incredibly silly – KAY DEE EMM Feb 19 '13 at 18:20
  • http://www.kay-dee-emm.com/Test This is the Test home page of my site. If you minimize you'll see the problem – KAY DEE EMM Feb 20 '13 at 13:11
  • You still have a background on your `html` element, and a set width on your `body`. Please look at the fiddle I posted here: http://jsfiddle.net/zaknotzak/TVdxK/1/ – zxqx Feb 20 '13 at 16:26
  • Cool, now just add `overflow: hidden` to `#container` and you're set. – zxqx Feb 20 '13 at 16:33
6

Try changing height to min-height on your body element. This will make the body element to be 100% is the content is too short to fill the whole thing, and grow when the content is larger than the browser.

Shauna
  • 9,495
  • 2
  • 37
  • 54
  • 1
    This didn't work. Just made my body disappear entirely. Here is my live Test page: http://www.kay-dee-emm.com/Test – KAY DEE EMM Feb 20 '13 at 13:13
0

The accepted answer does not solve the issue when there is no content on the page then the column will not be visible at all.

The solution that finally worked is introduction of a wrapper and adding display: table;

My solution not only covers the column with background color when there IS a content, but also when there is none.

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>

see that when you remove the contents - the column still stretching full-height

Alex
  • 4,607
  • 9
  • 61
  • 99