CSS 100％高度，填充/边距


CSS 100% height with padding/margin

这让我疯狂了好几天了，但实际上这是我在过去几年中一直存在的问题：使用HTML / CSS我怎样才能制作出具有宽度和/或宽度的元素高度是它的父元素的100％，仍然有适当的填充或边距？

通过"正确"我的意思是如果我的父元素是200px高并且我用padding = 5px指定height = 100%，我希望我应该在所有方面得到一个190px高元素border = 5px，很好地居中父元素。

现在，我知道那不是标准盒子模型指定它应该如何工作(虽然我想知道为什么，确切地说......)，所以明显的答案不起作用：

1
2
3
4
5
#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

但在我看来，必须有一些方法可以为任意大小的父母可靠地产生这种效果。有谁知道完成这个(看似简单)任务的方法？

哦，为了记录，我对IE兼容性并不十分感兴趣，所以应该(希望)让事情变得更容易一些。

编辑：自从一个例子被要求，这是我能想到的最简单的一个：

1
2
3
4
5
<html style="height: 100%">
    <body style="height: 100%">
       
    </body>
</html>

接下来的挑战是让黑盒子在所有边缘都显示25像素的填充，而页面不会变得足够大以至于需要滚动条。

相关讨论

我学习了如何阅读"PRO HTML和CSS设计模式"这些东西。 display:block是div的默认显示值，但我喜欢将其显式化。容器必须是正确的类型; position属性为fixed，relative或absolute。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}
1
  Hello, world

Nooshu的评论小提琴

相关讨论