2010-02-08 84 views
1

固定的高度和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> 

非常感谢。 感谢

回答

4

试试这个设置为.div2

.div2 { 
    overflow:scroll; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    bottom: 0; 
    width: 250px; 
    border:yellow solid; 
} 

这种方式,您将.div2权下.div1绝对定位和扩展它的宽度和高度,就像你要(到容器的宽度和高度)

编辑

IE错误可以通过包装.div2到另一个被固定DIV - ><div><div class="div2"></div></div>

也尝试加入这个CSS的.leftContent声明

.leftContent { 
    /* other declarations */ 
    position: relative; 
    overflow: hidden; 
} 
+0

感谢您的回复。似乎在IE中不能正常工作:(尽管在FireFox中正确渲染,IE不会溢出,但不会在.div2上设置高度:100%,并且当你执行滚动条底部时仍然存在相同的问题。建议? – Lukie 2010-02-08 14:15:51

+0

我将.div2封装在一个外部div中,所以'START .... etc'内容不在.div2(

<.div2>
“START ..”之内,也尝试使用.div2中的文本,但使用外部div只是包装.div2(
<.div2>
“START ...”并应用.leftContent更改但IE仍然无法正确呈现。我做错了什么? – Lukie 2010-02-08 14:41:03

+0

IE浏览器总是很难:)内容“START ..”应该保留在'.div2'中 – 2010-02-08 15:09:43

0

更新下面的CSS

.leftContent { 
    left:0; 
    top:0; 
    padding:0; 
    width:250px; 
    height:100%; 
    color:white; 
    background:blue; 
    overflow:hidden; 
    border:blue solid; 
    position:relative; 
} 
.div1 
{ 
    height:200px; 
    background-color:black; 
    border: red solid; 
    border-width:2px; 
} 
.div2 
{ 
    border-width:2px; 
    position:absolute; 
    top:204px; 
    bottom:2px; 
    overflow-y:scroll; 
    right:0px; 
    border:yellow solid; 
} 

做出的左相对含量,使其成为一个定位的元素,现在是包含两个div的块。这对于允许div2填充剩余空间很重要。

明确设置border-width,因此我知道在哪里定位div2以便不与div1的边框重叠。

基本上使用绝对定位得到DIV2与明确指定位置沿填充剩余空间leftContent。如果我使用overflow,我会在底部找到一个没有滚动的滚动条,以便摆脱我使用的overflow-y