Question

我目前正在使用Materializecss来显示模态。在我的模态中，我有div Content使用ng-repeat显示项目。问题是，随着内容的填充，我的content-div的css规则永远不会被拾取。溢出（滚动条）出现在我的模态而不是我的content-div。

我实际上希望我的标题和按钮始终可见。

（简化的html）：

<div class="modal">
     <div class="title"> ... </div>
     <div class="content">
        <ul>
             <li class="collection-item" ng-repeat="usr in returnedUsers">{{usr.UserName}}</li>
         </ul>
     <div class="button">
</div>

CSS类

.modal {
background-clip: padding-box;
background-color: #eee;
border-radius: 2px;
display: none;
left: 0;
margin: auto;
max-height: 70%;
max-width: 55%;
overflow-y: auto;
padding: 24px;
position: fixed;
right: 0;
transform: translate(0px);
z-index: 1000;

.content{
     max-height: 60%;
     overflow: auto;
}

简化的JSFiddle：fiddle

关注SO-Post并没有为我解决问题：

css max-height inside max-height

Table inside a div with max-height

firefox css max-width and max-height inside max-height div

注意：如果可能，我希望阻止更改课程modal

注2：我.content的设置高度并没有为我解决。

Answer 1

这是一个解决方案：

您需要在max-height中为.content ul而不是percentage

提供固定值

通常，块框的内容仅限于内容边缘   的盒子。在某些情况下，盒子可能会溢出，这意味着它的内容   部分或全部位于盒子之外，例如：


元素的高度超过指定给它的显式高度   包含块（即，包含块的高度由...确定）   ＆＃39;身高＆＃39;财产，而非内容高度）。

详细了解overflow

＆＃13;

    .modal {
      background-clip: padding-box;
      background-color: #eee;
      border-radius: 2px;
      left: 0;
      margin: auto;
      max-height: 70%;
      max-width: 55%;
      overflow-y: auto;
      padding: 24px;
      position: fixed;
      right: 0;
      transform: translate(0px);
      z-index: 1000;
    }
    .content ul {
      max-height: 70px; /* whatever you want*/
      overflow: auto;
    }

＆＃13;

<div class="modal">
  <div class="title">MyTitle</div>
  <div class="content">
    <ul>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
    </ul>
    <div class="button">Btn1 - Btn2</div>
  </div>

＆＃13;

包含最大高度的div包含另一个具有最大高度的div（溢出不起作用）

1 个答案: