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

  • Z时代
  • 2024-01-10
  • 分类：问答

使用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，但我喜欢，使其明确。容器必须是正确的类型；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>

以上是 CSS 100％高度，带填充/边距 的全部内容， 来源链接： utcz.com/qa/426237.html

回到顶部