CSS 100%高度，带填充/边距

使用超文本标记语言/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像素的填充，而页面不会变得足够大，需要滚动条。

389684 次浏览
小开

这是CSS的一个彻头彻尾的白痴-我还没有理解推理（如果有人知道，请解释）。

100%表示容器高度的100%——添加了任何边距、边框和填充。因此，实际上不可能获得填充其父级且具有边距、边框或填充的容器。

另请注意，浏览器之间的设置高度也不一致。

自从我发布这篇文章以来，我学到的另一件事是，百分比是相对于容器的长度的，也就是说，它的宽度，使得百分比对高度更没有价值。

如今，vh和vw视口单元更有用，但对于顶级容器以外的任何东西仍然不是特别有用。

小开

根据w3c规范，高度是指可视区域的高度，例如在1280x1024像素分辨率的显示器上，100%高度=1024像素。

最小高度是指包含内容的页面的总高度，因此在内容大于1024px的页面上，最小高度：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>
小开
最佳答案

我在阅读“PRO超文本标记语言和CSS设计模式”时学会了如何做这些事情。display: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 Noo的评论

小开

解决方法是根本不使用高度和宽度！使用顶部，左侧，右侧，底部附加内框，然后添加边距。

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

小开

有一个CSS3中的新属性，您可以使用它来更改框模型计算宽度/高度的方式，它被称为框大小。

通过将此属性设置为值“border-box”，它会使您在添加填充或边框时应用它的任何元素都不会拉伸。如果您定义宽度为100px和10px的填充，它仍然是100px宽。

box-sizing: border-box;

点击此处查看浏览器支持。它不适用于IE7及更低版本，但是，我相信Dean Edward的IE7.js增加了对它的支持。享受：）

小开 
  <style type="text/css">.stretchedToMargin {position:absolute;width:100%;height:100%;
}</style>
小开

Frank的例子让我有点困惑——它在我的例子中不起作用，因为我还没有很好地理解定位。重要的是要注意父容器元素需要有一个非静态的位置（他提到了这一点，但我忽略了，这不在他的例子中）。

下面是一个示例，其中子元素-给定填充和边框-使用绝对定位来填充父元素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定位的有用链接

小开

另一种解决方案是使用显示：表，它具有不同的框模型行为。

您可以为父级设置高度和宽度，并添加填充而不展开它。子级具有100%的高度和宽度减去填充。

JSBIN

另一种选择是使用盒子大小的程序。唯一的问题是它们在IE7中不起作用。

小开

更好的方法是使用calc()属性。因此，您的案例如下所示：

#myDiv {width: calc(100% - 10px);height: calc(100% - 10px);padding: 5px;}

简单、干净、没有变通方法。只要确保你没有忘记值和运算符之间的空格（例如(100%-5px)会破坏语法。享受！

小开

另一种解决方案：您可以对边距和大小使用百分比单位。例如：

.fullWidthPlusMargin {width: 98%;margin: 1%;}

这里的主要问题是边距会随着父元素的大小略有增加/减少。大概你更喜欢的功能是边距保持不变，子元素增长/收缩以填充行间距的变化。所以，根据你需要显示的紧密程度，这可能是有问题的。（我也会选择较小的边距，比如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>

2. Full height with 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

body {margin: 0;}.container {min-height: 100vh;border: 50px solid pink;box-sizing: border-box;background: silver;}
<div class="container">Hello world.</div>

小开

围绕div的边框，而不是页面主体边距

另一个解决方案-我只是想要一个简单的边框在我的页面的边缘，我想要100%的高度时，内容小于。

边框框不起作用，固定的定位对于这样一个简单的需求似乎是错误的。

我最终在我的容器中添加了一个边框，而不是依赖于页面主体的边距-它看起来像这样：

body, html {height: 100%;margin: 0;}
.container {width: 100%;min-height: 100%;border: 8px solid #564333;}
小开

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>

（CSS重置对于实际问题不一定重要。）

重要的部分是flex: 1（与父级的display: flex组合）。有趣的是，我所知道的关于Flex属性如何工作的最合理的解释来自一个react-native留档，所以我还是参考一下：

（…）flex： 1，它告诉一个组件填充所有可用空间，在具有相同父级的其他组件之间均匀共享

小开

这是display: block的默认行为您可以在2020年修复它的最快方法是设置父元素的display: 'flex'并填充，例如20px，然后其所有子元素的高度相对于其高度将为100%。

小开

添加-webkit和-moz会更合适

-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;

提交答案