将 HTML 中的正文限制为容纳小页面内容所需的高度

Question

我有一个网页，当内容很短时， body的background-color填充浏览器窗口。 有时内容可能很大并填满浏览器窗口。 有没有办法控制body的height以适应内容？ 我曾尝试将body的height设置为100%并设置为auto但这无济于事。 不需要Javascript解决方案是首选。 包括一个最小的例子：

<!DOCTYPE html>
<html lang="en-CA">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible">
        <title>Minimal Testcase for Body Height Sizing</title>
        <style>
            html, body {
                height: 100%;
            }
            body {
                background-color: #f7fad4;
                color: #262626;
            }
        </style>
    </head>
    <body>
        <h1>Test Heading</h1>
        <p>Sample text</p>
    </body>
</html>

当我将body的height设置为auto ，Chrome 开发工具正确报告了height ，但background-color溢出并填满了浏览器窗口。 所以问题就变成了，如何防止background-color溢出。 `

Answer 1

将 HTML 背景色设置为白色。

html{
    background-color: white;
}

如果html没有应用任何样式，CSS body background旨在填充整个viewport 。

Answer 2

尝试设置 html 元素的高度

html { 
height: 100%; 
}
body {
min-height: 100%; 
}