HTML vs Body: How to Set Width and Height for Full Page Size
Setting min-height to 100% on both elements does not allow the body element to fill the page like you might expect. If you check the computed style values in dev tools, the body element has a height of zero.
Using a percentage as a size value requires the element to reference a parent to base that percentage on.
The HTML element references the viewport which has a height value equal to the visible viewport height. However, we only set a min-height on the HTML element… NOT a height property value.
Therefore, the body element has no parent height value to reference when deciding what 100% is equal to.
html, body {
min-height: 100%;
}
body { background-color: dodgerblue; }Ideal Height Setting for a Full Responsive Page
html {
height: 100%;
}
body {
min-height: 100%;
}更现代的做法：
body { min-height: 100vh; }
This example uses vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport.
高度和宽度都设置：
html { background-color: #000; }
body {
min-height: 100vh;
max-width: 400px;
background-color: papayawhip;
margin: 0 auto;
}