滾動內部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像素，並把滾動對此