Question

这让我疯狂了好几天了，但实际上这是我在过去几年中一直存在的一个问题：使用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像素的填充，而页面不会变得足够大，不需要滚动条。

Answer 1

我学会了如何阅读“PRO HTML and CSS Design Patterns”这些事情。 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>

Nooshu的Fiddle

comment

Answer 2

您可以使用new property in CSS3来更改框模型计算宽度/高度的方式，它称为框大小调整。

通过使用值“border-box”设置此属性，当您添加填充或边框时，它会使您应用它的任何元素都不会拉伸。如果你定义100px宽度和10px填充的东西，它仍然是100px宽。

box-sizing: border-box;

See here for browser support。它不适用于IE7及更低版本，但我相信Dean Edward的IE7.js会增加对它的支持。享受：）

Answer 3

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

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

Answer 4

更好的方法是使用calc（）属性。所以你的情况应该是这样的：

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

简单，干净，没有解决方法。只要确保你不要忘记值和操作符之间的空格（例如（100％-5px）会破坏语法。享受！

Answer 5

根据w3c规格，高度是指可视区域的高度，例如在1280x1024像素分辨率监视器上100％高度= 1024像素。

min-height指页面的总高度，包括内容，因此在内容大于1024px min-height的页面上：100％将拉伸以包含所有内容。

另一个问题是在大多数现代浏览器中，填充和边框被添加到高度和宽度，除了ie6（ie6实际上是非常合乎逻辑但不符合规范）。这称为盒子模型。所以，如果你指定

min-height: 100%;
padding: 5px;

它实际上会给你100％+ 5px + 5px的高度。要解决这个问题，你需要一个包装容器。

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

Answer 6

<强> 1。全高padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

<强> 2。全高margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}

<div class="container">Hello world.</div>

第3。全高border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

Answer 7

这是CSS的彻头彻尾的习惯之一 - 我还没有理解推理（如果有人知道，请解释）。

100％表示容器高度的100％ - 添加任何边距，边框和填充。因此，实际上不可能获得一个填充其父级并且具有边距，边框或填充的容器。

另请注意，浏览器之间的设置高度也非常不一致。

自从我发布以来我学到的另一件事是，百分比是相对于容器的长度，即它的宽度，使得百分比对于身高更加毫无价值。

如今，vh和vw视口单元更有用，但对顶级容器以外的任何东西都不是特别有用。

Answer 8

另一种解决方案是使用display：table，它具有不同的盒子模型行为。

您可以为父级设置高度和宽度，并添加填充而不扩展它。孩子的身高和宽度都是100％减去填充物。

JSBIN

另一种选择是使用盒子大小的属性。唯一的问题是它们在IE7中不起作用。

Answer 9

另一种解决方案：您可以使用百分比单位作为边距和尺寸。例如：

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

这里的主要问题是边距将随着父元素的大小而略微增加/减少。据推测，您希望的功能是边距保持不变，子元素增长/缩小以填充间距变化。因此，根据您需要显示器的紧张程度，这可能会有问题。（我也会选择较小的保证金，比如0.3％）。

Answer 10

弗兰克的例子让我有点困惑 - 它在我的情况下不起作用，因为我还不太了解定位。重要的是要注意父容器元素需要具有非静态位置（他提到了这一点，但我忽略了它，并且它不在他的例子中）。

这是一个例子，其中给定的填充和边框 - 使用绝对定位来填充父100％。父母使用相对定位，以便在保持正常流程的同时为孩子的位置提供参考点 - 下一个元素“更多内容”不受影响：

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

快速学习CSS定位的有用link

Answer 11

现在是2018年，由于这个问题在Google上不断出现，因此应在此处提及新的热门话题。

使用flexbox（适用于IE11）的解决方案：（or view on jsfiddle）

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

（CSS-reset对于实际问题不一定重要。）

重要的部分是flex: 1（与父级的display: flex结合使用）。有趣的是，我对Flex属性的工作方式最合理的解释来自于本机文档so I refer to it anyway。

Answer 12

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

另一个解决方案 - 我只是想在页面边缘有一个简单的边框，当内容小于该值时我想要100％的高度。

边框不起作用，固定的定位对于这种简单的需求似乎是错误的。

我最后在我的容器中添加了一个边框，而不是依赖于页面正文的边缘 - 它看起来像这样：

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

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

Answer 13

这是.fetchone的默认行为，您可以在2020年解决此问题的最快方法是设置display: block的父元素和填充，例如20px，则其所有子项的高度均相对于其高度为100％。

Answer 14

添加-webkit和-moz更合适

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Answer 15

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

}
</style>

CSS 100％高度，填充/边距

15 个答案:

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