这让我疯狂了好几天了,但实际上这是我在过去几年中一直存在的问题:使用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中创建垂直对齐方式
.base{
background-color:green;
width:200px;
height:200px;
overflow:auto;
position:relative;
}
.vert-align{
padding-top:50%;
height:50%;
}并使用以下div结构.
<!-- and used the following div structure. -->
<div class="base">
<div class="vert-align">
Content Here
</div>
</div>虽然这似乎适用于这种情况,但我感到惊讶的是,当我增加或减少我的基础div的宽度时,垂直对齐会突然.我期待当我设置padding-top属性时,它将填充占父容器高度的百分比,这在我们的情况下是基数,但是上面的50%的值是以百分比计算的.宽度.:(
有没有办法将填充和/或边距设置为高度的百分比,而无需使用JavaScript？