问题
I have my html and body set to 100% height, and a background image set on body, which gets cut off when scrolling down, as shown below.
However, YouTube has 100% height on html and body, and a background on body, and it stretches to the full height of the content. How can I achieve this?
回答1:
If the only reason you put the 100% height is for the background (as one of your comments seems to suggest), then just change that to min-height: 100% and you should have no issues. You will have 100% height on short pages, but expand to as much as you need on longer pages.
回答2:
You cannot extend an image unless you know the exact total height. The background image is "Extended" to the bottom. Often websites make use of an image that slowly "fades" to a solid color and then the background is set to that solid color.
Another common solution is to mark the background image as fixed so that way it doesn't scroll and thus always shows as expected.
The 100% height on the body is a scam... 8-) It generally represents 100% of the window, not the body.
回答3:
A background-image will not automatically stretch to fill its container. If you want to create a 'continuous' background, you should use either the repeat-y property (which makes the image repeat vertically), set a background-position: fixed or, in the case of a solid colour, just set a coloured background.
In your case, it looks like your background is a solid colour. Might I suggest just using a plain background colour? It makes your CSS easier to read and change, and it also saves your server some bandwidth.
来源：https://stackoverflow.com/questions/8696911/background-cuts-off-when-html-and-body-height-are-set-to-100