这让我疯狂了好几天了,但实际上这是我在过去几年中一直存在的问题:使用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像素的填充,而页面不会变得足够大以至于需要滚动条.
我有一个具有以下结构的网站:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航位于左侧,内容div位于右侧.内容div的信息通过PHP引入,因此每次都不同.
我如何垂直缩放导航,使其高度与内容div的高度相同,无论加载哪个页面？