与这个问题有关。
这是一个小提琴:http: //jsfiddle.net/DRbRS/
请注意红色轮廓的列表 div 如何与绿色容器 div 的底部不对齐。
问题是没有办法提前知道列表的结果高度应该是多少,即使标题的高度是已知的。
有没有办法在不求助于javascript的情况下处理这个问题?
我们需要的是一种风格height: fill;
与这个问题有关。
这是一个小提琴:http: //jsfiddle.net/DRbRS/
请注意红色轮廓的列表 div 如何与绿色容器 div 的底部不对齐。
问题是没有办法提前知道列表的结果高度应该是多少,即使标题的高度是已知的。
有没有办法在不求助于javascript的情况下处理这个问题?
我们需要的是一种风格height: fill;
使用position: absolute
和设置顶部、左侧、右侧和底部:http: //jsfiddle.net/QARC9/
本文描述了它的工作原理。
http://www.alistapart.com/articles/conflictingabsolutepositions/
用这个替换你的 CSS
#container {
left: 50px;
width: 200px;
position: fixed;
height: 90%;
border: 2px dashed green;
}
#header {
height: 30px;
line-height: 30px;
text-align: center;
border: 2px dashed blue;
margin-left:-2px;
margin-top:-2px;
width:200px
}
#list {
border: 2px dashed red;
overflow: auto;
height: 91%;
width:200px;
margin-left:-2px;
margin-top:-2px;
}