HTML
<div class="container">
<div class="header">
<span>
<span>First</span>
</span>
<span>
<span>Second</span>
</span>
<span class="active">
<span>Thrid</span>
</span>
</div>
<div class="body">
<div class="Control1">
Content!
</div>
</div>
</div>
CSS
.container
{
height: 300px;
border: black 1px solid;
}
.container > .header
{
background: grey;
}
.container > .header > span
{
display: inline-block;
padding: 10px;
}
.container > .header > .active
{
background: black;
color: white;
}
.container > .body
{
height: 100%;
overflow: auto;
background: lightgrey;
}
http://jsfiddle.net/ytg8S/
我在这里的问题是,我有一个300像素高的容器div,然后我有未知高度的标题(取决于上面的项目数量和屏幕大小,它可能不止一行。)如果它的内容比空间多,我如何让.body占据其余空间并显示滚动??
我的第一个想法是摆弄绝对定位,但当我有多行.header项时,这就不起作用了。。
我不能更改html,因为它是由第三方组件生成的(我可以,但这将是一项艰巨的工作),如果可以的话,我宁愿避免使用javascript。。
如果我正确理解你的问题,那么我认为这会满足你的要求:
container > .body
{
height: 100%;
max-height:100%;
overflow: auto;
background: lightgrey;
}
试试这个。。希望这能帮助
.container
{
height: 300px;
border: black 1px solid;
background: #D3D3D3;
}
.container > .header
{
height:auto;
background: grey;
max-height: 200px;
overflow: auto;
}
.container > .header > span
{
display: inline-block;
padding: 10px;
}
.container > .header > .active
{
background: black;
color: white;
}
.container > .body
{
height: auto;
max-height: 100px;
overflow: auto;
background: lightgrey;
}