固定的高度和100%的高度我试图让div扩展到100%的高度与滚动条的底部仍然可见,当还包含一个固定的高度股利。有人可以帮助我:)集装箱DIV
当使用波纹管布局时,.div2底部的垂直滚动条脱离视点的高度,我猜是因为.div1是200px高,推div1到100%身高+ 200px。
有没有一种方法可以使.div1为固定高度,并且.div2扩展为填充剩余窗口高度并在达到该高度时溢出。
这里是CSS
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow:hidden;
}
.container
{
height:100%;
}
.leftContent {
left:0;
top:0;
padding:0;
width:250px;
height:100%;
color:white;
background:blue;
overflow:hidden;
border:blue solid;
}
.div1
{
height:200px;
background-color:black;
border: red solid;
}
.div2
{
overflow:scroll;
height:100%;
border:yellow solid;
}
这里是HTML。
<div id="container" class="container">
<!-- Start Left Column-->
<div id="leftColumn" class="leftContent">
<div id="div1" class="div1">
CONTENT
</div>
<div id="div2" class="div2">
START START START START START START START START START START START START START START START START
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
END END END END END END END END END END END END END END END END END END END END END END END END
</div>
</div>
<!-- End Left Column-->
</div>
非常感谢。 感谢
感谢您的回复。似乎在IE中不能正常工作:(尽管在FireFox中正确渲染,IE不会溢出,但不会在.div2上设置高度:100%,并且当你执行滚动条底部时仍然存在相同的问题。建议? – Lukie 2010-02-08 14:15:51
我将.div2封装在一个外部div中,所以'START .... etc'内容不在.div2(
IE浏览器总是很难:)内容“START ..”应该保留在'.div2'中 – 2010-02-08 15:09:43