# CSS 设置页面宽高

[HTML vs Body: How to Set Width and Height for Full Page Size](https://www.freecodecamp.org/news/html-page-width-height/)

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.

```css
html, body {
    min-height: 100%;
}
body { background-color: dodgerblue; }
```

## Ideal Height Setting for a Full Responsive Page

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

更现代的做法：

```css
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.

高度和宽度都设置：

```css
html { background-color: #000; } 
body {
    min-height: 100vh;
    max-width: 400px;
    background-color: papayawhip; 
    margin: 0 auto;
}
```