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

一尘不染

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

css

使用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个像素，而页面不会足够大以至于需要滚动条。

阅读 713

2020-05-16

共1个答案

一尘不染

我阅读了“ [PRO HTML和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>

2020-05-16