这让我疯狂了好几天了,但实际上这是我在过去几年中一直存在的问题:使用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,它有两个内部div; 两者都应在容器内取100%宽度和100%高度.
我将两个内部div设置为100%高度.这在Firefox中运行良好,但在IE中,div不会伸展到100%高度,而只会伸展到其中文本的高度.
以下是我的样式表的简化版本.
#container
{
height: auto;
width: 100%;
}
#container #mainContentsWrapper
{
float: left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
#container #sidebarWrapper
{
float: right;
height: 100%;
width: 29.7%;
margin: 0;
padding: 0;
}
有什么我做错了吗？或者我错过了任何Firefox/IE怪癖？
有没有办法设置布局,使标题是50px,正文是100%,页脚是50px？
我希望身体至少用完整个观察区域.我希望网页和页眉始终在屏幕上
我正在尝试使用这种技术
填充页面高度100%
最终它失败了,因为DOM有自定义标签,不会尊重高度标签
例:
作品
<div style="height:100%">
ok here
<div style="height:100%">
<!-- WORKS: takes full browser height -->
</div>
</div>
破碎
<div style="height:100%">
ok here
<my-tag style="height:100%">
<!-- BROKEN : takes minimal browser height -->
</my-tag>
</div>
我试过用
<polymer-element name="my-tag" extends="div">
但是然后页面默默地不呈现任何东西.