这让我疯狂了好几天了,但实际上这是我在过去几年中一直存在的问题:使用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像素的填充,而页面不会变得足够大以至于需要滚动条.
我有这个HTML结构:
<div id="body">
<div id="head">
<p>Dynamic height without scrollbar</p>
</div>
<div id="content">
<p>Dynamic height with scrollbar</p>
</div>
<div id="foot">
<p>Fixed height without scrollbar</p>
</div>
</div>
我希望主要部分(#body)中的三个部分没有溢出.所以我需要一个中间部分的滚动条.
我试过这个CSS:
#content{
border: red solid 1px;
overflow-y: auto;
}
还有这个:
#content{
border: red solid 1px;
overflow-y: auto;
height: 100%;
}
但它们都不起作用.
我在JSFiddle上做了一个例子.
我只能用CSS和HTML做到这一点吗？我宁愿避免使用Javascript.
最近我问了这个问题:溢出(滚动) - 100%容器高度关于如何实现具有可变高度的垂直滚动div.
一个非常有用的用户提供了一个使用绝对定位和高度的解决方案:100%,这里:http://jsfiddle.net/TUwej/2/.在这个小提琴中,您可以看到基本的所需行为 - 滚动div将填充主容器的高度,这由'#main'元素中的内容决定.
我有点修改并使用top:0 bottom:0而不是height:100%以容纳可滚动区域上方的元素.修改后的版本可以在这里看到:http://jsfiddle.net/N6muv/3/(我意识到有一些额外的标记和类定义是空的,并且相邻的兄弟组合似乎是多余的 - 这些是实际结构)
一切都很好,除了我必须为滚动div提供一个固定的顶部坐标(注意顶部:'.sidebar-list'选择器的120px声明).我想这是相对于它上面的'.sidebar-options'元素,所以上面的选项容器可以有任意数量的选项,可滚动的div将适当地定位自己.使用固定坐标,如果添加或删除任何选项,则会发生重叠或产生不必要的空间 - 我想避免这种情况.应该出现的确切选项数量因视图而异.
我曾想过将滚动div包装在一个相对定位的容器中,但这样做会产生与bottom的冲突:0不再指示主'.wrapper'容器的高度(应该这样做).类似地,使用height:100%将使用'.wrapper'容器的计算高度,因此可滚动div将超出'.wrapper'的边界.
有没有办法保持第二个小提琴中显示的功能,但可滚动div的顶部相对于选项div的底部(可变高度)？
在此先感谢您的任何建议.
编辑:SO问我是否想要开始赏金,所以我做了(第一次) - 希望100分不算太低.仍然在寻找一个无脚本的纯css解决方案,它不涉及y轴的固定坐标或尺寸(宽度和左侧分配都可以).谢谢