CSS 100% 高度与填充/边距
使用 HTML/CSS，我怎样才能使一个元素的宽度和/或高度是其父元素的 100% 并且仍然具有适当的填充或边距？
“正确”是指如果我的父元素是 200px 高，并且我用 padding = 5px 指定 height = 100%，我希望我应该得到一个 190px 高的元素，四面都是 border = 5px，很好地居中父元素。
现在，我知道这不是标准盒子模型指定它应该如何工作的方式（尽管我想知道为什么，确切地说......），所以明显的答案不起作用：
#myDiv {
width: 100%
height: 100%;
padding: 5px;
}
但在我看来，必须有某种方法可以可靠地为任意大小的父级产生这种效果。有谁知道完成这个（看似简单的）任务的方法？
哦，为了记录，我对 IE 的兼容性并不是很感兴趣，所以这应该（希望）让事情变得更容易一些。
编辑：由于要求提供示例，因此这是我能想到的最简单的示例：
<html style="height: 100%">
<body style="height: 100%">
<div style="background-color: black; height: 100%; padding: 25px"></div>
</body>
</html>
接下来的挑战是让黑框在所有边缘都显示为 25 像素的填充，而页面不会变得足够大而需要滚动条。
我通过阅读“PRO HTML and CSS Design Patterns”学会了如何做这些事情。 display:block 是 div 的默认显示值，但我喜欢明确说明。容器必须是正确的类型； position 属性是 fixed、relative 或 absolute。
.stretchedToMargin { 显示：块；位置：绝对；高度：自动；底部：0；顶部：0；左：0；对：0；边距顶部：20px；边距底部：20px；边距右：80px；左边距：80px；背景颜色：绿色； }
您可以使用 new property in CSS3 来更改盒子模型计算宽度/高度的方式，它称为盒子大小。
通过将此属性设置为值“border-box”，当您添加填充或边框时，它会使您应用它的任何元素都不会拉伸。如果你定义了 100px 宽度和 10px 内边距的东西，它仍然是 100px 宽。
box-sizing: border-box;
See here for browser support。它不适用于 IE7 及更低版本，但是，我相信 Dean Edward 的 IE7.js 增加了对它的支持。享受 ：）
border-box 是每个人的英雄 :)
解决方案是根本不使用高度和宽度！使用顶部、左侧、右侧、底部连接内框，然后添加边距。
.box {边距：8px;位置：绝对；顶部：0；左：0；对：0； bottom:0}
更好的方法是使用 calc() 属性。所以，你的情况看起来像：
#myDiv {
width: calc(100% - 10px);
height: calc(100% - 10px);
padding: 5px;
}
简单，干净，没有变通办法。只需确保不要忘记值和运算符之间的空格（例如 (100%-5px) 会破坏语法。享受吧！
根据 w3c 规范，高度是指可视区域的高度，例如在 1280x1024 像素分辨率的显示器上 100% 高度 = 1024 像素。
min-height 是指包含内容的页面的总高度，因此在内容大于 1024px min-height:100% 的页面上将拉伸以包含所有内容。
另一个问题是除了 ie6 之外的大多数现代浏览器中的高度和宽度都添加了填充和边框（ie6 实际上很合乎逻辑，但不符合规范）。这称为盒子模型。所以如果你指定
min-height: 100%;
padding: 5px;
它实际上会给你 100% + 5px + 5px 的高度。为了解决这个问题，您需要一个包装容器。
<style>
.FullHeight {
height: auto !important; /* ie 6 will ignore this */
height: 100%; /* ie 6 will use this instead of min-height */
min-height: 100%; /* ie 6 will ignore this */
}
.Padded {
padding: 5px;
}
</style>
<div class="FullHeight">
<div class="Padded">
Hello i am padded.
</div
</div>
<强> 1。带 padding 的全高
身体{边距：0； } .container { 最小高度：100vh;填充：50px； box-sizing：边框框；背景：银色； }
<强> 2。带 margin 的全高
身体{边距：0； } .container { 最小高度：计算（100vh - 100px）；边距：50px；背景：银色； }
<强> 3。带 border 的全高
身体{边距：0； } .container { 最小高度：100vh;边框：50px 纯粉色； box-sizing：边框框；背景：银色； }
这是 CSS 的彻头彻尾的白痴之一——我还没有理解其中的原因（如果有人知道，请解释一下）。
100% 表示容器高度的 100% - 添加任何边距、边框和填充。因此，实际上不可能获得一个填充其父级并具有边距、边框或填充的容器。
另请注意，浏览器之间的设置高度也是出了名的不一致。
自从我发布这篇文章以来，我学到的另一件事是，百分比是相对于容器的长度，即宽度，使得百分比对于高度变得毫无价值。
如今，vh 和 vw 视口单元更有用，但对于除了顶级容器之外的任何东西都不是特别有用。
另一种解决方案是使用具有不同盒子模型行为的 display:table。
您可以为父级设置高度和宽度并添加填充而不扩展它。孩子有 100% 的高度和宽度减去填充。
另一种选择是使用 box-sizing 属性。两者的唯一问题是它们不能在 IE7 中工作。
另一种解决方案：您可以使用百分比单位来表示边距和大小。例如：
.fullWidthPlusMargin {
width: 98%;
margin: 1%;
}
这里的主要问题是边距会随着父元素的大小而略微增加/减少。大概您更喜欢的功能是让边距保持不变，让子元素增长/缩小以填充间距的变化。因此，根据您需要显示器的紧密程度，这可能会出现问题。 （我也会选择较小的利润率，比如 0.3%）。
flexbox 的解决方案（在 IE11 上工作）：(or view on jsfiddle)
<html>
<style>
html, body {
height: 100%; /* fix for IE11, not needed for chrome/ff */
margin: 0; /* CSS-reset for chrome */
}
</style>
<body style="display: flex;">
<div style="background-color: black; flex: 1; margin: 25px;"></div>
</body>
</html>
（CSS-reset 对于实际问题不一定重要。）
重要的部分是 flex: 1（与父级的 display: flex 组合）。有趣的是，我所知道的关于 Flex 属性如何工作的最合理的解释来自一个 react-native 文档，so I refer to it anyway：
(...) flex: 1，它告诉组件填充所有可用空间，在具有相同父级的其他组件之间平均共享
添加 -webkit 和 -moz 会更合适
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
弗兰克的例子让我有点困惑——它在我的情况下不起作用，因为我对定位还不够了解。需要注意的是，父容器元素需要有一个非静态的位置（他提到了这一点，但我忽略了它，他的例子中没有）。
这是一个示例，其中子级 - 给定填充和边框 - 使用绝对定位来填充父级 100%。父级使用相对定位来为子级的位置提供参考点，同时保持正常流程 - 下一个元素“more-content”不受影响：
#box {
position: relative;
height: 300px;
width: 600px;
}
#box p {
position: absolute;
border-style: dashed;
padding: 1em;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="box">
<p>100% height and width!</p>
</div>
<div id="more-content">
</div>
用于快速学习 CSS 定位的有用 link
div 周围的边框，而不是页面正文边距
另一种解决方案 - 我只想要一个简单的页面边缘边框，当内容小于该值时，我想要 100% 的高度。
Border-box 不起作用，对于如此简单的需求，固定定位似乎是错误的。
我最终为我的容器添加了一个边框，而不是依赖于页面主体的边距 - 它看起来像这样：
body, html {
height: 100%;
margin: 0;
}
.container {
width: 100%;
min-height: 100%;
border: 8px solid #564333;
}
这是 display: block 的默认行为 您可以在 2020 年修复它的最快方法是设置父元素的 display: 'flex' 和填充，例如 20px，然后其所有子元素的高度将相对于其高度为 100%。
<style type="text/css">
.stretchedToMargin {
position:absolute;
width:100%;
height:100%;
}
</style>
top:0、bottom:0本质上是“拉伸”元素。我只能让它与position:absolute一起工作top:20px;bottom:20px;left:20px;right:20px;而不是使用边距吗？