CSS 100% 高度与填充/边距答案

【问题标题】：CSS 100% height with padding/marginCSS 100% 高度与填充/边距
【发布时间】：2010-10-03 21:42:06
【问题描述】：

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

【问题讨论】：

我发现这两种解决方案是最可靠的：http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/您有任何我们可以查看和使用的特定 HTML 吗？
stackoverflow.com/questions/3931187/…

标签： css

【解决方案1】：

根据 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>

【讨论】：

@Alex：但是是什么让内部 div（填充的那个）成为外部 div 高度的 100%。我的经验是，你只需要在一个更大的全高 div 中得到一个短的 div。

【解决方案2】：

加上-webkit和-moz会更合适

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

【讨论】：

【解决方案3】：

更好的方法是使用 calc() 属性。所以你的情况看起来像：

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

简单、干净、没有变通方法。只要确保您不要忘记值和运算符之间的空格（例如 (100%-5px) 这会破坏语法。享受吧！

【讨论】：

不错的解决方案。请记住检查浏览器支持：Can I use calc()
这实际上不会给你 100% 的宽度和高度加上 5 像素的内边距，因为内边距会使元素分别变宽和变大 10 像素吗？
最后是一个很好的解决方案，不像其他人那样，你将顶部、右侧、底部和左侧设为 0，这仅适用于 position: absolute;
我认为正确的是：#myDiv { width: calc(100% - 10px);高度：计算（100% - 10px）；填充：5px； } 左起 5，右起 5 = 10，上 5 下，下 5 = 10

【解决方案4】：

这是display: block 的默认行为，在 2020 年修复它的最快方法是设置父元素的 display: 'flex' 和填充，例如20px 那么它的所有子元素的高度都将是其高度的 100%。

【讨论】：

【解决方案5】：

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 属性如何工作的最合理的解释来自一个 react-native 文档，so I refer to it anyway：

(...) flex: 1，告诉一个组件填充所有可用空间，在具有相同父级的其他组件之间平均共享

【讨论】：

【解决方案6】：

有一个new property in CSS3 可以用来改变盒子模型计算宽度/高度的方式，它被称为盒子大小。

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

box-sizing: border-box;

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

【讨论】：

终于！我已经等待这个确切的功能大约 10 年了。可惜IE7不支持，但我一直觉得还在用IE的人不值得漂亮的布局。
这个和IE's quirks mode box model基本一样。我觉得有趣的是每个人都讨厌 IE，但现在 border-box 是每个人的英雄 :)
仅供参考，现在除了 -moz 之外的所有浏览器都删除了 box-sizing 的浏览器前缀。请参阅 paulirish.com/2012/box-sizing-border-box-ftw 和 cmets 进行良好讨论
是的！这是正确答案！ 100% 高度现在可以相对于其父母正确缩放事物，而不会溢出。如果可以的话，我会给出一百万个 +1。
非常次要的一点（对于较旧的答案）。这适用于填充，但不适用于边距。边距在边界之外。对我还是很有用的。谢谢！

【解决方案7】：

这是 CSS 的彻头彻尾的白痴之一——我还没有理解其中的原因（如果有人知道，请解释一下）。

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

另请注意，浏览器之间的设置高度也是出了名的不一致。

自从我发布这篇文章后，我了解到的另一件事是，百分比是相对于容器的长度，即宽度，使得百分比对于高度变得更无价值。

如今，vh 和 vw 视口单元更有用，但对于除了顶级容器之外的任何其他东西仍然不是特别有用。

【讨论】：

没有推理，只是浏览器开始趋向一致行为时发生了什么。查看我的回复中提到的书。
赞成使用正确的术语。 Tex 和我见过的任何布局管理器都是正确的，只是 CSS 必须是特殊的。

【解决方案8】：

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

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

Border-box 不起作用，固定位置似乎不适合这么简单的需求。

我最终为我的容器添加了一个边框，而不是依赖于页面主体的边距 - 它看起来像这样：

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

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

【讨论】：

【解决方案9】：

1.全高与padding

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

&lt;div class="container"&gt;Hello world.&lt;/div&gt;

2。全高与margin

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

&lt;div class="container"&gt;Hello world.&lt;/div&gt;

3.全高与border

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

&lt;div class="container"&gt;Hello world.&lt;/div&gt;

【讨论】：

【解决方案10】：

解决方案是根本不使用高度和宽度！使用上、左、右、下连接内框，然后添加边距。

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

【讨论】：

投赞成票，因为你在技术上是正确的，但它也与弗兰克的答案基本相同（我认为这对那些草率的浏览器更友好。）

【解决方案11】：

我通过阅读“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>

Fiddle by Nooshu 的comment

【讨论】：

极好的解决方案，将添加书签。任何想要现场演示的人都可以快速将其添加到jsfiddle.net/Rpdr9。希望你不要介意。
虽然@Toji 不关心 IE 兼容性，但不幸的是我不得不这样做。此解决方案最初不适用于 IE6。将 Dean Edwards 的 IE9.js 添加到页面中即可完成这项工作。现在我只需要希望并祈祷相对/绝对定位不会与子元素中的某些东西混淆......
-1 （虽然看起来我在这里是少数 :P ）。这假设盒子可以是绝对定位的；人们已经过度使用 pos:abs，他们不需要这种弹药。举个例子：一个div“panels”，里面有多个“panel”类的div。 “面板”有{溢出：隐藏； height:300px;} 和“面板”有不同的内容/内容高度，{border:#000 solid 1px;向左飘浮;边距右：10px;}。使所有“面板”成为“面板”的高度，而不会在任何时候失去边界。 “面板” div 在这里不能是 pos:abs'd。不过，@Marco 的解决方案适用于这种情况。
哦，哇，我明白了。 top:0、bottom:0 本质上是“拉伸”元素。我只能让它与position:absolute一起工作
难道你不能只使用top:20px;bottom:20px;left:20px;right:20px; 而不是使用边距吗？

【解决方案12】：

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

您可以为父级设置高度和宽度并添加填充而不扩展它。孩子有 100% 的高度和宽度减去填充。

JSBIN

另一种选择是使用 box-sizing 属性。两者的唯一问题是它们不能在 IE7 中工作。

【讨论】：

【解决方案13】：

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

这是一个示例，其中子级（给定填充和边框）使用绝对定位来填充父级 100%。父级使用相对定位来为子级的位置提供参考点，同时保持正常流程 - 下一个元素“more-content”不受影响：

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

一个有用的link 快速学习 CSS 定位

【讨论】：

【解决方案14】：

另一种解决方案：您可以对边距和大小使用百分比单位。例如：

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

这里的主要问题是边距会随着父元素的大小而略微增加/减少。大概您更喜欢的功能是让边距保持不变，让子元素增长/缩小以填充间距的变化。因此，根据您需要显示器的紧密程度，这可能会出现问题。（我也会选择更小的利润率，比如 0.3%）。

【讨论】：

【解决方案15】：

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

}
</style>

【讨论】：