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像素的填充，而页面不会增长到需要滚动条的程度。

当前回答

添加-webkit和-moz更合适

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

2020-05-14 09:52:59

其他回答

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

}
</style>

2012-01-20 13:10:13

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

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

box-sizing: border-box;

有关浏览器支持，请参阅此处。它不适用于IE7或更低版本，但是，我相信Dean Edward的IE7.js为它添加了支持

2010-06-14 14:10:08

弗兰克的例子让我有点困惑——这在我的情况下不起作用，因为我对定位还不够了解。需要注意的是，父容器元素需要有一个非静态位置（他提到了这一点，但我忽略了它，在他的示例中没有）。

下面是一个示例，其中子对象（给定填充和边框）使用绝对定位来100%填充父对象。父级使用相对定位，以便在保持正常流的同时为子级的位置提供参考点-下一个元素“更多内容”不受影响：

#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定位的有用链接

2012-02-08 07:37:49

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

.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

添加-webkit和-moz更合适

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

2020-05-14 09:52:59

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

推荐文章

最新文章

标签