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

当前回答

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

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

被Nooshu的评论弄糊涂了

2009-01-27 23:53:17

其他回答

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

}
</style>

2012-01-20 13:10:13

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

2020-02-26 16:02:52

被Nooshu的评论弄糊涂了

2009-01-27 23:53:17

div周围的边框，而不是页面正文边距

另一个解决方案-我只是希望在页面边缘周围有一个简单的边框，当内容小于此值时，我希望有100%的高度。

边框不起作用，固定的位置似乎不适合这种简单的需求。

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

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

2017-12-18 03:19:13

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

.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%高度，带填充/边距

推荐文章

最新文章

标签