Question

我有以下div

<div id='a'>
    <div id='b'>Some text</div>
</div>

我想将父级的最大高度设置为100px，子级div设置为70％，当父级div增长到100px时，将滚动条添加到子级div。

我试过以下但是父div不会超过70px。

示例

＆＃13;

#a {
  width: 100%;
  background-color: #DAE3F3;
  padding: 10px;
  position: relative;
  min-height: 70px;
  max-height: 100px;
}
#b {
  height: 70%;
  overflow: auto;
  position: absolute;
}

＆＃13;

<div id='a'>
  <div id='b'>Some text</div>
</div>

＆＃13;

这是 Fiddle 链接

Answer 1

我相信您正在寻找overflow-y: scroll;和min-height: 70%;

＆＃13;

#a {
    width: 100%;
    background-color: #DAE3F3;
    padding: 10px;
    position: relative;
    min-height:70px;
    max-height:100px;
    overflow-y: scroll;
}
#b {
    display: block;
    min-height: 70%;
}

＆＃13;

<div id='a'>
    <div id='b'>Some te textSome te textSome te textSome te textSome te textSome te textSome ttextSome te textSome te textSome te textSome te textSome te textSomextSome te textSometextSome te textSome te textSome te textSome te textSome te textSome extSome te textSometextSome te textSome te textSome te textSome te textSome te textSome extSome te textSometextSome te textSome te textSome te textSome te textSome te textSome e te textSometextSome te textSome te textSome te textSome te textSome te textSome te textSometextSome te textSome te textSome te textSome te textSome te textSome te textSomee textSome te textSome te textSome te textSome te textSome te textSome te textSome text</div>
</div>

＆＃13;

Answer 2

您的父级div永远不会转到100px，因为您的孩子的高度为70px，将子div min-height设置为70％：

#b {
       min-height:70%;
       max-height:100px;
   }

这是fiddle

Answer 3

由于您使用的是absolute定位，而不是height和min-height，请尝试使用bottom: 30%。

10px填充现在正在影响高度。删除它并测试。如果需要，使用另一个包装器div来添加10px填充。

添加最大和最小高度CSS

3 个答案: