滚动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我的解决方案，这样你就可以对其进行测试。