后端开发教程 - Java、Spring Boot 实战 - msg200.com
CSS 高度全页CSS 陷阱：如何使用 div 填充页面？
TL;DR
如果您想要一个全页容器 div，请确保您具有以下内容：
/* override browser default */
html,
body {
margin: 0;
padding: 0;
}
/* use viewport-relative units to cover page fully */
body {
height: 100vh;
width: 100vw;
}
/* include border and padding in element width and height */
* {
box-sizing: border-box;
}
/* full-sized container that fills up the page */
div {
height: 100%;
width: 100%;
/* example padding, font-size, background, etc */
padding: 10px;
font-size: 20px;
background-color: lightskyblue;
}
假设您想要一个填满整个页面的 div...
div {
height: 100%;
width: 100%;
font-size: 20px;
background-color: lightskyblue;
}
什么？！不行！高度仍然只占内容，而不是整个页面。
这个宽度很好，因为 div 默认是一个块元素，无论如何它都会占用尽可能多的宽度。
我们可以使用更“绝对”的值吗px？
div {
/* height: 100% */
height: 865px; /* current height of my browser */
/* ... */
}
它可以工作...直到浏览器调整大小
当浏览器调整大小时它不会适应。
您可以为此使用 JS，但这对我们的期望来说太过分了。
我提到的
px“绝对”是指它们不相对于任何其他元素（例如 rem 和 vh）。但实际尺寸仍然取决于设备。以下是一些详细信息：
Stack Overflow：CSS 像素真的是一个绝对单位吗？
相关单位赶来救援！
老派height: 100%
html,
body {
height: 100%;
width: 100%;
}
div {
height: 100%;
/* ... */
}
成功了！（我们稍后会修复滚动条）
通过将两者<html>及其子项的<body>高度设置为 100%，我们实现了完整尺寸。
请注意，仅设置其中任何一个都不会起作用，因为百分比总是相对于另一个值。
在这种情况下：
div是 100% 的高度bodybody是 100% 的高度htmlhtml是视口高度的 100%
视口是浏览器的可见区域，根据设备不同而不同。
视口 >
html>body>div
例如，iPhone 6/7/8 的视口为 375x667。您可以在浏览器的开发者工具移动选项中验证这一点。
目前，你可以将视口视为设备像素大小或分辨率。但如果你想深入了解：
较新的解决方案：视口单位vh和vw
视口百分比长度（又名视口单位）已经存在了一段时间，非常适合响应浏览器大小调整。
- 1 视口高度 (
1vh) = 视口高度的 1% - 1 视口宽度 (
1vw) = 视口宽度的 1%
换句话说，100vh= 100% 的视口高度
100vw= 100% 视口宽度
因此这些有效地填满了设备视口。
html,
body {
/* height: 100%; */
/* width: 100% */
}
div {
/* height: 100%;
width: 100%; */
height: 100vh;
width: 100vw;
/* ... */
}
看起来也不错！（我们稍后会修复滚动条）
正如@angelsixuk和@mpuckett在评论中提到的，在移动浏览器上使用时，滚动时会出现已知的跳跃行为
100vh，这是一个问题，但 Webkit 认为这是故意为之。详情请参阅以下链接：在某些移动浏览器中，视口高度高于文档可见部分；以及Stack Overflow：CSS3 100vh 在移动浏览器中不稳定
怎么样min-height: 100vh？
Whileheight将长度固定为100vh，min-height起始于100vh，但允许内容延伸到 div 超出该长度。如果内容小于指定的长度，min-height则无效。
换句话说，min-height确保元素至少具有该长度，并且height如果height已定义且小于则覆盖min-height。
对于我们的目标是让 div 子元素具有完整的高度和宽度，这并没有什么区别，因为内容也是完整大小的。
一个很好的用例
min-height是使用粘性页脚，当页面上有更多内容时，它会被推送。查看这里以及其他 vh 的良好用法
一种非常常见的做法是直接height: 100vh应用...width: 100vw<body>
在这种情况下，我们甚至可以像一开始一样保持容器的div相对大小，以防我们以后改变主意。
通过这种方法，我们可以确保整个 DOM 主体占据整个高度和宽度，而不管我们的容器 div 如何。
body {
height: 100vh;
width: 100vw;
}
div {
height: 100%;
width: 100%;
/* height: 100vh;
width: 100vw; */
/* ... */
}
vh/vw相对%
思考vh, vwvs的一个好方法%是，它们类似于emandrem
%和em都是相对于父级大小的，而vw/vh和rem都是相对于“最高参考”的，根字体大小为 rem，设备视口为 vh/vw。
但为什么要有滚动条？
<html>并<body>具有默认边距和填充！
浏览器对 HTML 元素设置了默认的边距、填充和边框。最糟糕的是，每个浏览器的默认设置都不一样！
Chrome 默认<body>有一个margin: 8px
并100vh + 8px导致溢出，因为它超出了视口
幸运的是，解决这个问题相当容易：
html,
body {
margin: 0;
padding: 0;
}
body {...
这是一个“全面”的解决方案，可以涵盖您可能拥有的任何浏览器的所有边距和填充变化。
太棒了！现在我们的 div 已经填满了整个页面，而且没有滚动条！
最后，让我们添加一点填充，因为内容位于边缘处会很尴尬。
div {
padding: 10px;
/* ... */
}
什么？！滚动条又回来了！发生了什么？
box-sizing边框
box-sizing允许您定义填充和边框是否包含在 div 的高度和宽度中。
content-box的默认值box-sizing不包括padding和border的长度，所以div变成
height = 100% + 10px * 2width = 100% + 10px * 2
溢出页面！
border-box包括填充和边框，因此 div 保持我们所需的大小：
height = 100%width = 100%
使用选择器将所有元素设置border-box为整个页面的一致布局和大小是很常见的*：
* {
box-sizing: border-box;
}
完美的！
