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.
1html, body {
2 min-height: 100%;
3}
4body { background-color: dodgerblue; }Ideal Height Setting for a Full Responsive Page
1html {
2 height: 100%;
3}
4body {
5 min-height: 100%;
6}更现代的做法：
1body { 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.
高度和宽度都设置：
1html { background-color: #000; }
2body {
3 min-height: 100vh;
4 max-width: 400px;
5 background-color: papayawhip;
6 margin: 0 auto;
7}