Question

我有一个显示表格的模态窗口。用户可以单击按钮向表单添加新行。随着每个新行的追加，整个模态窗口的高度应该会增加，直到距离视口底部50px为止。

演示中的示例标记：

 <div class="parent">
    <h4>window title</h4>
    <a href="#">add new row</a>
    <section>
      <h4>content</h4>
      <p>some random content which never scrolls</p>
      <ul><li></li></ul>
    </section>
  </div>

我基本上使用具有绝对定位的div来包含模态窗口。随着窗口的增长，它最终将达到这个高度，然后我可以overflow-y: scroll内容。

麻烦的是，只有表单本身才能滚动。随着每个新行的添加，窗口应该在高度上增长，直到它到达其父母的位置。高度。此时，只有ul内容应该滚动 - 而不是整个模态。

我意识到这可以通过javascript完成，但我希望找到一个纯css解决方案，以便在我们的应用程序中避免特定于DOM的逻辑，并且必须考虑视口调整大小事件等。

overflow-y仅在容器的最大高度有效时才有效。我无法将其设置为列表，因为我不知道它会是什么。
我可以使用绝对定位使列表的高度动态化，但是父窗口会失去它的高度，并且在孩子出现时不会调整。

http://jsbin.com/wanipiw/1/edit?html,css,js,output

Answer 1

如果您的父级内容的高度和ul之前的部分内容的高度是一致的，并且不会基于内容动态，您可以使用max-height：calc（100vh - valuePx）来允许ul到可滚动。我还包括一个保证金：0到你的ul css。

请参阅JSFiddle

$(function() {
  var ul = $('ul');
  $('a').on('click', function() {
    ul.append('<li></li>');
    return false;
  });
})

.parent {
  position: fixed;
  bottom: 56px;
  overflow-y: hidden;
  top: 56px;
  /* demo only */
  border: 1px solid red;
  left: 50%;
  margin-left: -100px;
  width: 200px;
}
section {
  border: 1px solid blue;
  min-height: 300px;
}
ul {
  padding: 0;
  max-height: calc(100vh - 341px);
  overflow-y: auto;
  margin: 0;
}
li {
  background: #ccc;
  height: 50px;
  margin-top: 10px;
}
li {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <h4>window title</h4>
  <a href="#">add new row</a>

  <section>
    <h4>content</h4>

    <p>some random content which never scrolls. the list below should scroll when the section reaches the max height</p>
    <ul>
      <li></li>
    </ul>
  </section>
</div>

当父级达到其最大高度

1 个答案: