这让我疯狂了好几天了,但实际上这是我在过去几年中一直存在的问题:使用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像素的填充,而页面不会变得足够大以至于需要滚动条.
Fra*_*man 738
我学习了如何阅读" 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>小智 371
CSS3中有一个新属性可用于更改框模型计算宽度/高度的方式,它称为框大小.
通过使用值"border-box"设置此属性,当您添加填充或边框时,它会使您应用它的任何元素都不会拉伸.如果你定义100px宽度和10px填充的东西,它仍然是100px宽.
box-sizing: border-box;
在这里看到浏览器的支持.它不适用于IE7及更低版本,但我相信Dean Edward的IE7.js增加了对它的支持.请享用 :)
amo*_*olk 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>小智 37
更好的方法是使用calc()属性.所以你的情况看起来像:
#myDiv {
width: calc(100% - 5px);
height: calc(100% - 5px);
padding: 5px;
}
简单,干净,没有解决方法.只要确保你不要忘记值和操作符之间的空格(例如(100%-5px)会破坏语法.享受!
Ale*_*lex 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>
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视口单元更有用,但对顶级容器以外的任何东西都不是特别有用.
| 归档时间： |
|
| 查看次数： |
319307 次 |
| 最近记录： |