CSS 100% 高度与填充/边距

小编典典

CSS 100% 高度与填充/边距

all

使用 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 像素的填充，而页面不会变得大到需要滚动条。

阅读 122

2022-03-01

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

2022-03-01