#myDiv {
width: 100%
height: 100%;
padding: 5px;
}
<html style="height: 100%">
<body style="height: 100%">
<div style="background-color: black; height: 100%; padding: 25px"></div>
</body>
</html>
我阅读了 “ 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>
CSS3中有一个新属性,可用于更改框模型计算宽度 / 高度的方式,这称为框大小。
通过将此属性设置为 “border-box”,它使您添加边框或边框时应用的任何元素都不会拉伸。如果您定义的宽度为 100px,填充为 10px,则宽度仍为 100px。
box-sizing: border-box;
请参阅此处以获取浏览器支持 。它不适用于 IE7 及更低版本,但是,我相信 Dean Edward 的IE7.js添加了对此的支持。请享用 :)
解决方案是根本不使用高度和宽度!使用顶部,左侧,右侧,底部附加内部框,然后添加边距。
.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>
更好的方法是使用 calc()属性。因此,您的情况如下所示:
#myDiv {
width: calc(100% - 5px);
height: calc(100% - 5px);
padding: 5px;
}
简单,干净,没有解决方法。只需确保您不要忘记值和运算符之间的空格(例如(100%-5px))就会破坏语法。
根据 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>
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>
这是 CSS 的完全惯用语言之一 - 我尚未理解其推理(如果有人知道,请解释一下)。
100%表示容器高度的 100%- 上面添加了任何边距,边框和填充。因此,实际上不可能获得一个填充其父容器且具有边距,边框或填充的容器。
另请注意,众所周知,浏览器之间的设置高度也不一致。
自发布此书以来,我了解到的另一件事是,百分比是相对于容器的长度 (即宽度)而言的,因此百分比对于高度而言甚至更不值钱了。
如今,vh 和 vw 视口单元更有用,但对于顶层容器以外的其他任何东西仍然没有特别有用。
另一种解决方案是使用 display:table,它具有不同的框模型行为。
您可以为父级设置高度和宽度,并添加填充而不扩展它。这个孩子的身高和宽度减去填充物为 100%。
另一种选择是使用盒大小属性。两者唯一的问题是它们在 IE7 中不起作用。
另一种解决方案:您可以将百分比单位用于边距和大小。例如:
.fullWidthPlusMargin {
width: 98%;
margin: 1%;
}
这里的主要问题是,边距将随着父元素的大小而略微增加 / 减少。大概您希望的功能是使边距保持恒定,并且子元素增大 / 缩小以填充间距的变化。因此,根据您需要显示屏的紧度,这可能会出现问题。 (我也会选择较小的利润率,例如 0.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
结合使用display: flex
父级display: flex
)。有趣的是,我所知道的关于 Flex 属性如何工作的最合理的解释来自于本机文档, 因此无论如何我都引用它 :
(...)flex:1,它告诉组件填充所有可用空间,并与同一父组件在其他组件之间平均共享