集裝箱DIV

Question

固定的高度和100％的高度我試圖讓div擴展到100％的高度與滾動條的底部仍然可見，當還包含一個固定的高度股利。有人可以幫助我:)

當使用波紋管佈局時，.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> 

非常感謝。 感謝

Answer 1

試試這個設置爲.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; 
} 

Answer 2

更新下面的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。