CSS 设置页面宽高

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