CSS填充/边距100％的高度
这已经让我疯狂了好几天了，但实际上这是我过去几年碰到的一个问题：使用HTML / CSS如何制作具有宽度和/或宽度的元素高度是它的父元素的100％，仍然有适当的填充或边距？
“适当”我的意思是说，如果我的父元素是200px高，我指定100px高度与5px填充我期望我应该得到一个190px高的元素与5px的“边界”在所有方面，很好地集中在父元素。
现在，我知道这不是标准框模型应该如何指定它应该工作（虽然我想知道为什么，正是…），所以明显的答案是行不通的：
#myDiv { width: 100% height: 100%; padding: 5px; } 但是在我看来，对于任意大小的父母来说，必定有某种可靠的方法可以产生这种效果。 有谁知道完成这个（看似简单的）任务的方法吗？
哦，为了logging，我对IE兼容性不是很感兴趣，所以应该（希望）让事情变得容易一些。
编辑：自从一个例子被要求，这里是我能想到的最简单的一个：
<html style="height: 100%"> <body style="height: 100%"> <div style="background-color: black; height: 100%; padding: 25px"></div> </body> </html>
接下来的挑战是如何让黑盒子在所有边上都有一个25像素的填充，而页面不会变得足够大而不需要滚动条。
我学会了如何做这些事情阅读“ PRO HTML和CSSdevise模式 ”。 display:block是div的默认显示值，但我想明确。 容器必须是正确的types; position属性是fixed ， relative或absolute 。
.stretchedToMargin { display: block; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin-top:20px; margin-bottom:20px; margin-right:80px; margin-left:80px; background-color: green; }
<div class="stretchedToMargin"> Hello, world </div>
CSS3中有一个新的属性，可以用来改变盒子模型计算宽度/高度的方式，这就是所谓的盒子大小。
通过使用值“border-box”来设置这个属性，当你添加一个填充或者边框的时候，它使得你应用它的那个元素不会伸展。 如果你定义了100px宽度和10px填充的东西，它仍然是100px宽。
box-sizing: border-box;
在这里查看浏览器支持 。 它不适用于IE7和更低，但是，我相信院长爱德华的IE7.js增加了对它的支持。 请享用 ：）
解决scheme是不使用高度和宽度！ 使用顶部，左侧，右侧，底部连接内部框，然后添加边距。
.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black"> <div class="box" style="background:green"> <div class="box" style="background:lightblue"> This will show three nested boxes. Try resizing browser to see they remain nested properly. </div> </div> </div>
更好的方法是用calc（）属性。 所以你的情况是这样的：
#myDiv { width: calc(100% - 5px); height: calc(100% - 5px); padding: 5px; }
简单，干净，没有解决方法。 只要确保不要忘记值和运算符之间的空格（例如（100％-5px））就会破坏语法。
根据w3c规格高度是指可视区域的高度，例如在1280×1024像素分辨率的显示器上，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>
这是CSS的彻头彻尾的愚蠢 – 我还没有理解的推理（如果有人知道，请解释）。
100％意味着容器高度的100％ – 添加边界，边界和填充。 所以实际上不可能得到一个填充它的父母，并有边缘，边界或填充的容器。
还要注意，设置高度在浏览器之间也是非常不一致的。
另一个解决scheme是使用display：table，它具有不同的box模型行为。
你可以设置父母的高度和宽度，并添加填充而不扩大它。 孩子有100％的身高和宽度减去填充物。
JSBIN
另一个select是使用箱子大小的属性。 唯一的问题是他们不会在IE7中工作。
另一个解决scheme：您可以使用百分比单位的边距和大小。 例如：
.fullWidthPlusMargin { width: 98%; margin: 1%; }
这里的主要问题是，边缘会随着父元素的大小而略微增加/减less。 大概你喜欢的function是边缘保持不变，子元素增长/缩小以填补间距的变化。 所以，取决于你的显示器有多紧张，这可能是有问题的。 （我也会有一个小的余地，比如0.3％）。
1. padding全高
body { margin: 0; } .container { min-height: 100vh; padding: 50px; box-sizing: border-box; background: silver; }
<div class="container">Hello world.</div>
弗兰克的例子让我感到困惑 – 这在我的情况下是行不通的，因为我还不了解定位。 注意父容器元素需要有一个非静态的位置是非常重要的（他提到了这一点，但是我忽略了它，这不在他的例子中）。
下面是一个例子，其中填充孩子的填充和边框 – 使用绝对定位填充父项100％。 父母使用相对定位，以便在正常stream程中为孩子的位置提供参考点 – 下一个元素“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定位的有用链接
<style type="text/css"> .stretchedToMargin { position:absolute; width:100%; height:100%; } </style>
