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


当前回答

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

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

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

其他回答

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

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

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

}
</style>

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

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

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


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

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

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

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

box-sizing: border-box;

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

我通过阅读“PRO HTML和CSS设计模式”学会了如何做这些事情。display:block是div的默认显示值,但我喜欢使其显式。容器必须是正确的类型;位置属性是固定的、相对的或绝对的。

.拉伸到边距{显示:块;位置:绝对;高度:自动;底部:0;顶部:0;左:0;右:0;页边空白:20px;边距底部:20px;右边距:80px;左边距:80px;背景色:绿色;}<div class=“stretchedToMargin”>你好,世界</div>

被Nooshu的评论弄糊涂了