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

使用HTML/CSS，我如何制作一个宽度和/或高度为其父元素的100%且仍具有适当填充或边距的元素？

所谓“恰当”，我的意思是，如果我的父元素是200px高，并且我指定height=100%，padding=5px，我会期望得到一个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像素的填充，而页面不会增长到需要滚动条的程度。

当前回答

使用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原生文档，所以我还是引用了它：

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

2018-06-28 12:36:56

其他回答

更好的方法是使用calc（）属性。因此，您的案例看起来像：

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

简单、干净，没有变通办法。只需确保不要忘记值和运算符之间的空格（例如（100%-5px），这会破坏语法。享受

2013-06-15 17:34:43

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

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

另外，众所周知，浏览器之间的设置高度也不一致。

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

如今，vh和vw视口单元更有用，但对于除了顶级容器之外的任何其他对象来说仍然不是特别有用。

2009-01-27 23:33:16

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

您可以为父级设置高度和宽度，并在不展开的情况下添加填充。子级的高度和宽度减去填充后为100%。

JSBIN公司

另一种选择是使用方框大小属性。两者唯一的问题是它们在IE7中都不起作用。

2012-11-30 14:35:08

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

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

这里的主要问题是，边距将随着父元素的大小而略微增加/减少。大概您更喜欢的功能是边距保持不变，子元素增长/收缩以填充间距变化。因此，取决于你需要多紧的显示器，这可能是有问题的。（我也会选择更小的利润率，比如0.3%）。

2013-10-29 19:12:38

解决方案是完全不使用高度和宽度！使用顶部、左侧、右侧和底部连接内框，然后添加边距。

.box｛margin:8px；位置：绝对；顶部：0；左侧：0；右侧：0；底部：0｝<div class=“box”style=“background:black”><div class=“box”style=“background:green”><div class=“box”style=“background:lightblue”>这将显示三个嵌套框。尝试调整浏览器大小以查看它们是否保持正确嵌套。</div></div></div>

2010-04-09 20:03:17

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

推荐文章

最新文章

标签