滚动内部div

Question

所以即时尝试制作面板。每个面板都有一个标题和一个内容。现在我想只能在内容上滚动。

的CSS：

.content-div{ 
    float:left; 
    height: 400px; 
    overflow-x:hidden; 
    overflow-y:hidden; 
    white-space: nowrap; 
} 

.panel-div{ 
    height:100%; 
    background-color: red; 
    display: inline-block; 
    overflow-y:hidden; 
} 

.panel-content{ 
    padding: 5px; 
    height:100%; 
    overflow-y:auto; 
} 

.panel-header{ 
    height:100px; 
    width:400px; 
    text-align:right; 
    padding:5px; 
    background-color: blue; 
} 

和HTML：

<div class="content-div"> 
    <div class="panel-div"> 
     <div class="panel-header"> 
     </div> 
     <div class="panel-content"> 
      <p>test</p> 
     </div> 
    </div> 
</div> 

的问题是，面板内容的div获取的内容div的，全高度，我不能拿出一个很好的我如何使它100％的content-div解决方案，并从头文件中取走100像素。我知道css3中有calc，但是有没有其他方法可以做到这一点？

Answer 1

你应该能够achiive你想要什么改变以下内容：

.content-div { 
 
    float: left; 
 
    height: 400px; 
 
    white-space: nowrap; 
 
} 
 
.panel-div { 
 
    height: 100%; 
 
    background-color: red; 
 

 
    /* add the following */ 
 
    padding-top: 100px; 
 
    box-sizing: border-box; 
 
} 
 
.panel-content { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    padding: 5px; 
 

 
    box-sizing: border-box; /* add this*/ 
 
} 
 
.panel-header { 
 
    height: 100px; 
 
    width: 400px; 
 
    text-align: right; 
 
    padding: 5px; 
 
    background-color: blue; 
 

 
    /* add the following */ 
 
    box-sizing: border-box; 
 
    margin-top: -100px; 
 
}

<div class="content-div"> 
 
    <div class="panel-div"> 
 
    <div class="panel-header"> 
 
     <p>head</p> 
 
    </div> 
 
    <div class="panel-content"> 
 
     <div class="padded"> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

但是如果你的DIV是400像素，你可以只让你.panel-content股利300像素，并把滚动对此