滾動div不滾動到內容的底部

Question

我有2個滾動div（用紅色標出）不會滾動到它們各自的底部。我似乎無法弄清楚需要調整什麼來修復它。

粗框框是一個模擬的瀏覽器窗口。

http://jsfiddle.net/jsk55rfb/4/

HTML

<div class="container"> 
    <div class="header"></div> 
    <div class="sidebar"></div> 
    <div class="main"> 
     <div class="detail-container"> 
      <div class="top-info"></div> 
      <div class="items-container"> 
       <div class="item blue"></div> 
       <div class="item orange"></div> 
       <div class="item blue"></div> 
       <div class="item orange"></div> 
      </div> 
     </div> 
     <div class="main-container"> 
      <div class="main-header"></div> 
      <div class="main-content"> 
       <div class="item grey"></div> 
       <div class="item purple"></div> 
       <div class="item grey"></div> 
       <div class="item purple"></div> 
       <div class="item grey"></div> 
       <div class="item purple"></div> 
       <div class="item grey"></div> 
       <div class="item purple"></div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.container { 
    height: 500px; 
    width: 500px; 
    border: solid 3px black; 
    overflow: hidden; 
} 

.header { 
    height: 25px; 
    background-color: #333; 
    right: 0; 
    left: 0; 
} 

.sidebar { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    width: 75px; 
    margin-top: 35px; 
    border: solid 1px grey; 
} 

.main { 
    height: 100%; 
    padding-left: 75px; 
} 

.main-container { 
    width: 65%; 
    height: 100%; 
} 

.main-content { 
    height: 100%; 
    overflow-y: scroll; 
    border: solid 1px red; 
} 

.main-header { 
    height: 20px; 
    border: 1px solid black; 
} 

.detail-container { 
    float: right; 
    width: 35%; 
    height: 100%; 
    border: solid 1px grey; 
} 

.top-info { 
    padding: 75px 0; 
} 

.items-container { 
    height: 100%; 
    overflow-y: scroll; 
    border: solid 1px red; 
} 

.item { 
    padding: 100px 0; 
} 

.blue { background-color: blue; } 
.orange { background-color: orange; } 
.grey { background-color: grey; } 
.purple { background-color: purple; } 

.content { 
    width: 65%; 
    height: 100%; 
} 

Answer 1

您有容器和溢出設置爲隱藏一個固定的高度。由於divs超過這個高度，溢出不能被看到。

試試這個：

.container { 
 
    height: 500px; 
 
    width: 500px; 
 
    border: solid 3px black; 
 
    overflow: scroll; 
 
} 
 

 
.header { 
 
    height: 25px; 
 
    background-color: #333; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
.sidebar { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 75px; 
 
    margin-top: 35px; 
 
    border: solid 1px grey; 
 
} 
 

 
.main { 
 
    height: 100%; 
 
    padding-left: 75px; 
 
} 
 

 
.main-container { 
 
    width: 65%; 
 
    height: 100%; 
 
} 
 

 
.main-content { 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
    border: solid 1px red; 
 
} 
 

 
.main-header { 
 
    height: 20px; 
 
    border: 1px solid black; 
 
} 
 

 
.detail-container { 
 
    float: right; 
 
    width: 35%; 
 
    height: 100%; 
 
    border: solid 1px grey; 
 
} 
 

 
.top-info { 
 
    padding: 75px 0; 
 
} 
 

 
.items-container { 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
    border: solid 1px red; 
 
} 
 

 
.item { 
 
    padding: 100px 0; 
 
} 
 

 
.blue { background-color: blue; } 
 
.orange { background-color: orange; } 
 
.grey { background-color: grey; } 
 
.purple { background-color: purple; } 
 

 
.content { 
 
    width: 65%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="header"></div> 
 
    <div class="sidebar"></div> 
 
    <div class="main"> 
 
     <div class="detail-container"> 
 
      <div class="top-info"></div> 
 
      <div class="items-container"> 
 
       <div class="item blue"></div> 
 
       <div class="item orange"></div> 
 
       <div class="item blue"></div> 
 
       <div class="item orange"></div> 
 
      </div> 
 
     </div> 
 
     <div class="main-container"> 
 
      <div class="main-header"></div> 
 
      <div class="main-content"> 
 
       <div class="item grey"></div> 
 
       <div class="item purple"></div> 
 
       <div class="item grey"></div> 
 
       <div class="item purple"></div> 
 
       <div class="item grey"></div> 
 
       <div class="item purple"></div> 
 
       <div class="item grey"></div> 
 
       <div class="item purple"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

當您使用100％的高度將其設置爲全高而與其它同級元素。所以他們是在100％的父元素，但然後頭被推倒。你將不得不在所有元素上使用固定的高度。或設置一個20％和其他80％等。

.main-content { width: 452px; } 
.items-container {width: 352px; } 

Answer 3

我可以用一些JavaScript解決這個問題。只要標記結構沒有改變，這應該適用於其他塊的任何內容大小。

祝你好運！

$(function(){ 
//creating vars based on jquery objects 
$itemsContainer = $('.items-container'); 
$mainContent = $('.main-content'); 

$container = $('.container'); 
$header = $('.header'); 
$mainHeader = $('.main-header');  

//calculating heights 
var containerH = $container.height();  
var headerH = $header.height();  
var mainHeaderH = $mainHeader.height(); 

//assigning new height to main-content class 
$mainContent.css("height", (containerH - headerH - mainHeaderH) + "px"); 

//similar operation for items-container 
//creating vars based on jquery objects 
$topInfo = $('.top-info'); 

//calculating heights 
var topInforH = $topInfo.outerHeight(); //since in your example top-info has no content only padding, you will need to use the method outerHeight instead of height 

//assigning new height to main-content class 
$itemsContainer.css("height", (containerH - headerH - topInforH) + "px"); }); 

順便說一句，我更新了您的jsfiddle我的解決方案，這樣你就可以對其進行測試。