css - padding/marginCSS 100%高度

  显示原文与译文双语对照的内容

这已经让我疯狂了几天了,但实际上,我在过去几年中遇到了一个问题: 使用 html/css,如何使具有宽度和/或者高度的元素成为父元素,并且仍具有适当的填充或者边距?

在父element,我用"正确"指的是,如果我的父元素是与 5 200 px高又我指定 100%高度px填充我预期,我应该能知道 190 px高px元素与 5"边框"一下四周,很好地 centered.

现在,我知道这不是标准框模型指定( 尽管我想知道为什么。) 应该工作的方式,所以显而易见的答案是:


#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像素的填充,而页面的大小不足以要求滚动条。

时间:

我学会了如何阅读" PRO HTML和CSS设计模式"的这些东西。 display:blockdiv的默认显示值,但我想让它显式显示。 容器必须是正确的类型;position 属性是 fixedrelative 或者 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;
}

HTML


<div class="stretchedToMargin">
 Hello, world
</div>

nooshu评论 小提琴由

有一个新的属性在 CSS3 ,可以用来改变盒子模型的方式计算宽度/高度,这叫做 box-sizing 。

通过使用值"border-box"设置这里属性它使你在添加填充或者边框时应用它的任何元素都不会拉伸。 如果你定义了 100像素宽度,10像素填充,它仍然是 100像素宽。


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

在这里查看浏览器支持列表。 它的并不适用于IE7和低一些,然而,我相信院长这是这一切的爱德华 IE7.js 添加来支持它。 享受: )

解决方案是不使用高度和宽度 ! 使用顶部,左侧,右侧,底部和底部附加 margin,然后添加边距。


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

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

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


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

简单,干净,无变通方法。只需确保不会忘记值和运算符( 例如( 100% -5像素) ) 之间的空格,将破坏语法。 enjoy!

结合上的w3c规格高度是指 比如的可视部分的高度 1280 x1024像素分辨率监视器= 1024 100%高度像素。

min-height指页面的总高度,包括内容,页面内容大于 1024像素 min-height: 100%将拉伸以包括所有内容。

另一个问题是,在大多数现代浏览器的高度和宽度中都添加了填充和边框,除了 ie6(ie6 is actually quite logical but does not conform to the spec) 。 这称为长方体模型。 所以如果你指定


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

它实际上会为你提供 100% + 5像素+ 5像素。 要绕过这一点,你需要一个包装容器。


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

css的width:auto 行为像 100%'页边距框',这意味着它将占据 100%的可用空间,任何增加的边距,边框或者填充都不会增加使用的空间。

于页边距,边框和padding,其他任何相关 CSS width 声明,比如 width:100% 操作就象一个'内容框'的声明,这意味着它会一直占用的空间量,加上 declared.的空间

在future,既然你的具体问题是关于一个 100% 宽度而你不需要伎俩我正要建议( schwieterman的回答完全足够了),但也许它会避免的问题跟进回答问题关于 50%/etc 同时框和帮助你理解该规范现在 and: 如何在你选择的框模型中设计。 注意,在其中描述的诡计是唯一可行的,如果你可以稍微html的语义清晰了。

[Applies to height, too, harping on width for ease of reference. ]

另一种解决方案:你可以使用百分比单位和大小。 例如:


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

这里的主要问题是,边距将随着父元素的大小略有增加/减小。 假设你想要的功能是让页边距保持不变,子元素增加/收缩以填充间距。 所以,根据你的显示器需要多么紧凑,可能有问题。 ( 我也会得到一个较小的边距,比如 0.3 %).

...