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

813

使用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个像素，而页面不会足够大以至于需要滚动条。

css

— 东治
source

我发现这两种解决方案是最可靠的：http : //www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/您是否有任何特定的HTML我们可以看到并玩吗？

— 尼克·普雷斯塔

stackoverflow.com/questions/3931187/...

— 奔

755

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

展开摘要

小提琴由Nooshu的评论

— 弗兰克·施维特曼
source

42

极好的解决方案，将为此添加书签。赶快将它添加到jsfiddle.net/Rpdr9中，以供任何需要现场演示的人使用。希望你不要介意。

— Nooshu 2010年

16

虽然@Toji不在乎IE的兼容性，但不幸的是我不得不这样做。此解决方案最初在IE6下不起作用。将Dean Edwards的IE9.js添加到页面即可完成此工作。现在，我只希望希望并祈祷相对/绝对定位不会对子元素造成影响……

— Christopher Parker，2010年

24

-1（尽管看起来我在这里是少数人：P）。假设盒子可以绝对放置；人们已经过度使用pos：abs了，他们不需要这种弹药。举个例子：一个div“ panels”，其中有多个“ panel”类的div。“面板”具有{overflow：hidden; height：300px;}和“面板”的内容/内容高度不同，{border：＃000实心1px; 向左飘浮; margin-right：10px;}。使所有“面板”的高度达到“面板”的高度，而不会在任何时候失去边界。“面板” div不能在这里pos：abs。不过，@ Marco的解决方案适用于这种情况。

— eternicode 2011年

8

哦，我明白了。的top:0，bottom:0基本上“伸”出的元素。我只能得到它一起工作position:absolute，虽然

— 马特

7

您难道不做top:20px;bottom:20px;left:20px;right:20px;而不是完全使用页边距吗？

— chowey

391

CSS3中有一个新属性，可用于更改框模型计算宽度/高度的方式，这称为框大小。

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

box-sizing: border-box;

请参阅此处以获取浏览器支持。它不适用于IE7及更低版本，但是，我相信Dean Edward的IE7.js添加了对此的支持。请享用：）

— 马可·雅尔丁
source

45

最后！我一直在等待这一确切功能已有10年了。可惜IE7不支持它，但我一直认为仍在使用IE的人不应该拥有漂亮的布局。

— cronoklee 2012年

2

这对我来说适用于iPhone / Safari和Android的默认浏览器，而上面绝对定位的解决方案不起作用。

— 2012年

18

这基本上与IE的quirks模式框模型相同。我发现每个人都讨厌IE却很有趣，但现在border-box却是每个人的英雄:)

— Matt Greer

14

仅供参考，除-moz外，所有框的浏览器前缀都已删除。请参阅paulirish.com/2012/box-sizing-border-box-ftw和相关评论，以进行深入讨论

— aponzani 2012年

3

是! 这是正确的答案！100％的高度现在可以相对于父母正确缩放事物，而不会溢出。如果可以的话，可以给出一百万个+1。

— Andrew Mao

65

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

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

展开摘要

— 阿莫克
source

6

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

— Toji 2010年

39

更好的方法是使用calc（）属性。因此，您的情况如下所示：

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

简单，干净，没有解决方法。只要确保您不要忘记值和运算符之间的空格即可（例如(100%-5px)，这将破坏语法。请尽情享受！

— 布赖恩·阿德勒
source

6

不错的解决方案。只需记住检查浏览器支持即可：我可以使用calc（）

— Brett Postin 2013年

5

难道这实际上不能为您提供100％的宽度和高度以及5px的填充，因为填充可以有效地使元素分别变宽和变大10px吗？

最终，这是一个很好的解决方案，与上面的其他方法不同，您将top，right，bottom和left的值设为0，这仅适用于position：absolute;

— Gil Epshtain '18

我认为正确的是：#myDiv {width：calc（100％-10px）; 高度：calc（100％-10px）; 填充：5px；}左5和右5 = 10，上5和下5 = 10

— 克里斯·P

21

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

— 亚历克斯
source

4

@Alex：但是是什么使内部div（填充的）成为外部div高度的100％。我的经验是，您只是在较大的全高div内得到了一个较短的div。

— 劳伦斯·多尔

8

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>

展开摘要

— 贴纸
source

7

这是CSS的完全惯用语言之一-我尚未理解其推理（如果有人知道，请解释一下）。

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

另请注意，众所周知，浏览器之间的设置高度也不一致。

自发布此书以来，我了解到的另一件事是，百分比是相对于容器的长度（即宽度）而言的，因此百分比对于高度而言甚至更不值钱了。

如今，vh和vw视口单元更有用，但对于顶层容器以外的其他任何东西仍然没有特别有用。

— 劳伦斯·多尔
source

没有理由，只是浏览器开始趋向一致行为所发生的情况。查看我的回信中提到的书。

— Frank Schwieterman 09年

赞成使用正确的术语。Tex和我见过的任何布局管理器都正确，只是CSS必须是特殊的。

— maaartinus

5

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

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

吉宾

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

— 用户名
source

4

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

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

这里的主要问题是，边距将随着父元素的大小而略微增加/减少。大概您希望的功能是使边距保持恒定，并且子元素增大/缩小以填充间距的变化。因此，根据您需要显示屏的紧度，这可能会出现问题。（我也会选择较小的利润率，例如0.3％）。

— ktbiz
source

3

使用flexbox的解决方案（在IE11上工作）：（或在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重置不一定很重要。）

重要的部分是flex: 1（与display: flex父母一起）。有趣的是，我所知道的关于Flex属性如何工作的最合理的解释来自于本机文档，因此无论如何我都引用它：

（...）flex：1，它告诉组件填充所有可用空间，并与同一父组件在其他组件之间平均共享

— 普齐山
source

2

弗兰克（Frank）的例子让我有些困惑-在我的情况下，该方法不起作用，因为我对定位不够了解。重要的是要注意，父容器元素必须具有非静态位置（他提到了这一点，但我忽略了它，而在他的示例中没有）。

这是一个示例，在该示例中，给定填充和边框的子项使用绝对定位填充父项的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定位的有用链接

— 曾彼得
source

0

div边框，而不是页面主体页边距

另一个解决方案-我只希望页面边缘周围有一个简单的边框，当内容小于该值时，我希望高度为100％。

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

我最终在容器中添加了边框，而不是依赖页面主体的边缘-看起来像这样：

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

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

— 克里斯·兰德尔
source

0

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

— 自由式09
source

0

添加-webkit和-moz更合适

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

— 用户名
source

-2

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

}
</style>

— Mujassir Nasir
source