html - 在内部 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>

问题是 panel-content div 获得了 content-div 的完整高度，我无法想出一个很好的解决方案来说明如何使它成为 100% 的 content-div 并从标题中去掉 100px。我知道 css3 中有计算器，但还有其他方法吗？

Answer 1

您应该能够通过更改以下内容来实现您想要的:

.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 是 400px，你可以将你的 .panel-content div 设置为 300px 并将滚动条放在上面