CSS 100% 高度，带填充/边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/485827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS 100% height with padding/margin
提问by Toji
With HTML/CSS, how can I make an element that has a width and/or height that is 100% of it's parent element and still has proper padding or margins?
使用 HTML/CSS，如何制作宽度和/或高度为其父元素 100% 且仍具有适当填充或边距的元素？
By "proper" I mean that if my parent element is 200pxtall and I specify height = 100%with padding = 5pxI would expect that I should get a 190pxhigh element with border = 5pxon all sides, nicely centered in the parent element.
通过“适当”我的意思是，如果我的父元素200px很高并且我指定height = 100%了padding = 5px我希望我应该得到一个190px高的元素，border = 5px所有边都很好，很好地居中在父元素中。
Now, I know that that's not how the standard box model specifies it should work (although I'd like to know why, exactly...), so the obvious answer doesn't work:
现在，我知道这不是标准盒模型指定它应该工作的方式（尽管我想知道为什么，确切地说......），所以明显的答案不起作用：
#myDiv {
width: 100%
height: 100%;
padding: 5px;
}
But it would seem to me that there must be SOME way of reliably producing this effect for a parent of arbitrary size. Does anyone know of a way of accomplishing this (seemingly simple) task?
但在我看来，必须有某种方法可以为任意大小的父级可靠地产生这种效果。有谁知道完成这个（看似简单的）任务的方法吗？
Oh, and for the record I'm not terribly interested in IE compatibility so that should (hopefully) make things a bit easier.
哦，为了记录，我对 IE 兼容性不是很感兴趣，所以（希望）应该让事情变得更容易一些。
EDIT:Since an example was asked for, here's the simplest one I can think of:
编辑：既然要求了一个例子，这是我能想到的最简单的一个：
<html style="height: 100%">
<body style="height: 100%">
<div style="background-color: black; height: 100%; padding: 25px"></div>
</body>
</html>
The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars.
然后面临的挑战是让黑框在所有边缘显示 25 像素的填充，而页面不会变得足够大以需要滚动条。
采纳答案by Frank Schwieterman
I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:blockis the default display value for the div, but I like to make it explicit. The container has to be the right type; positionattribute is fixed, relative, or absolute.
我通过阅读“ PRO HTML 和 CSS 设计模式”学会了如何做这些事情。Thedisplay:block是 的默认显示值div，但我喜欢明确表示。容器必须是正确的类型；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>回答by Marco Jardim
There is a new property in CSS3that you can use to change the way the box model calculates width/height, it's called box-sizing.
CSS3中有一个新属性，您可以使用它来更改框模型计算宽度/高度的方式，它称为框大小。
By setting this property with the value "border-box" it makes whichever element you apply it to not stretch when you add a padding or border. If you define something with 100px width, and 10px padding, it will still be 100px wide.
通过将此属性设置为“border-box”值，它可以使您在添加填充或边框时应用它的任何元素都不会拉伸。如果你定义了 100px 宽度和 10px 填充的东西，它仍然是 100px 宽。
box-sizing: border-box;
See here for browser support. It does not work for IE7 and lower, however, I believe that Dean Edward's IE7.jsadds support for it. Enjoy :)
请参阅此处了解浏览器支持。它不适用于 IE7 及更低版本，但是，我相信 Dean Edward 的IE7.js增加了对它的支持。享受 ：）
回答by amolk
The solution is to NOT use height and width at all! Attach the inner box using top, left, right, bottom and then add margin.
解决方案是根本不使用高度和宽度！使用顶部、左侧、右侧、底部连接内盒，然后添加边距。
.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>回答by Brian Aderer
The better way is with the calc() property. So your case would look like:
更好的方法是使用 calc() 属性。所以你的情况看起来像：
#myDiv {
width: calc(100% - 5px);
height: calc(100% - 5px);
padding: 5px;
}
Simple, clean, no workarounds. Just make sure you don't forget the space between the values and the operator (eg (100%-5px)that will break the syntax. Enjoy!
简单，干净，没有解决方法。只要确保您不要忘记值和运算符之间的空格（例如(100%-5px)，这会破坏语法。享受！
回答by Alex
According the the w3c spec height refers to the height of the viewable area e.g. on a 1280x1024 pixel resolution monitor 100% height = 1024 pixels.
根据 w3c 规范，高度是指可视区域的高度，例如在 1280x1024 像素分辨率的显示器上 100% 高度 = 1024 像素。
min-height refers to the total height of the page including content so on a page where the content is bigger than 1024px min-height:100% will stretch to include all of the content.
min-height 是指包含内容的页面的总高度，因此在内容大于 1024px 的页面上 min-height:100% 将拉伸以包含所有内容。
The other problem then is that padding and border are added to the height and width in most modern browsers except ie6(ie6 is actually quite logical but does not conform to the spec). This is called the box model. So if you specify
另一个问题是，除了 ie6（ie6 实际上很合乎逻辑但不符合规范），在大多数现代浏览器中，填充和边框都被添加到高度和宽度上。这称为盒模型。所以如果你指定
min-height: 100%;
padding: 5px;
It will actually give you 100% + 5px + 5px for the height. To get around this you need a wrapper container.
它实际上会给你 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>
回答by Stickers
1. Full height with padding
1.全高配 padding
body {
margin: 0;
}
.container {
min-height: 100vh;
padding: 50px;
box-sizing: border-box;
background: silver;
}<div class="container">Hello world.</div>2. Full height with margin
2.全高配 margin
body {
margin: 0;
}
.container {
min-height: calc(100vh - 100px);
margin: 50px;
background: silver;
}<div class="container">Hello world.</div>3. Full height with border
3.全高配 border
body {
margin: 0;
}
.container {
min-height: 100vh;
border: 50px solid pink;
box-sizing: border-box;
background: silver;
}<div class="container">Hello world.</div>回答by Lawrence Dol
This is one of the outright idiocies of CSS - I have yet to understand the reasoning (if someone knows, pls. explain).
这是 CSS 的彻头彻尾的白痴之一——我还没有理解其中的推理（如果有人知道，请解释一下）。
100% means 100% of the container height - to which any margins, borders and padding are added. So it is effectively impossible to get a container which fills it's parent and which has a margin, border, or padding.
100% 表示容器高度的 100% - 任何边距、边框和填充都添加到其中。所以实际上不可能得到一个容器来填充它的父容器并且有边距、边框或填充。
Note also, setting height is notoriously inconsistent between browsers, too.
另请注意，众所周知，浏览器之间的高度设置也不一致。
Another thing I've learned since I posted this is that the percentage is relative the container's length, that is, it's width, making a percentage even more worthless for height.
自从我发布这篇文章后我学到的另一件事是百分比是相对于容器的长度，即它的宽度，使得百分比对于高度来说更没有价值。
Nowadays, the vh and vw viewport units are more useful, but still not especially useful for anything other than the top-level containers.
现在，vh 和 vw 视口单元更有用，但对于顶级容器以外的任何东西仍然不是特别有用。
回答by user1721135
Another solution is to use display:table which has a different box model behaviour.
另一种解决方案是使用 display:table ，它具有不同的盒模型行为。
You can set a height and width to the parent and add padding without expanding it. The child has 100% height and width minus the paddings.
您可以为父级设置高度和宽度并添加填充而不扩展它。子项具有 100% 的高度和宽度减去填充。
Another option would be to use box-sizing propperty. Only problem with both would be they dont work in IE7.
另一种选择是使用 box-sizing 属性。两者的唯一问题是它们在 IE7 中不起作用。
回答by ktbiz
Another solution: You can use percentage units for margins as well as sizes. For example:
另一种解决方案：您可以对边距和尺寸使用百分比单位。例如：
.fullWidthPlusMargin {
width: 98%;
margin: 1%;
}
The main issue here is that the margins will increase/decrease slightly with the size of the parent element. Presumably the functionality you would prefer is for the margins to stay constant and the child element to grow/shrink to fill changes in spacing. So, depending on how tight you need your display to be, that could be problematic. (I'd also go for a smaller margin, like 0.3%).
这里的主要问题是边距会随着父元素的大小而略微增加/减少。大概您更喜欢的功能是让边距保持不变，并且子元素增长/缩小以填充间距的变化。因此，根据您需要显示器的紧密程度，这可能会出现问题。（我也会选择较小的利润率，比如 0.3%）。
回答by Putzi San
A solution with flexbox(working on IE11): (or view on jsfiddle)
使用flexbox的解决方案（在 IE11 上工作）：（或在 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>
(The CSS-resetis not necessarily important for the actual problem.)
（CSS 重置对于实际问题不一定重要。）
The important part is flex: 1(In combination with display: flexat the parent). Funnily enough, the most plausible explanation I know for how the Flex property works comes from a react-native documentation, so I refer to it anyway:
重要的部分是flex: 1（与display: flex父级结合）。有趣的是，我所知道的关于 Flex 属性如何工作的最合理的解释来自 react-native 文档，所以我还是参考了它：
(...) flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent
(...) flex: 1，它告诉组件填充所有可用空间，在具有相同父级的其他组件之间平均共享
