CSS 模态滚动

Question

请参阅以下 Plunk： https://plnkr.co/edit/se1lRiXuQ4JtvqQcEtOA

我正在尝试创建适合移动应用程序的模式。在不更改 HTML 顺序的情况下，我需要 CSS 来实现以下目标：

1. 修复滚动时顶部的标题（始终可见）
2. 将按钮固定在标题下方（始终可见）
3. 使项目列表可滚动

由于元素的高度可能会有所不同，我希望能够普遍做到这一点。以便自动计算高度

我被难住了，有什么想法吗？

.HTML

<div class="modal">
  <div class="modal-title">
    Header
  </div>
  <div class="modal-content">
    <div class="button-group">
      <div class="button selected">Button One</div>
      <div class="button">Button Two</div>
    </div>
    <div class="list"></div>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12</div>
      <div class="item">Item 13</div>
      <div class="item">Item 14</div>
      <div class="item">Item 15</div>
      <div class="item">Item 16</div>
      <div class="item">Item 17</div>
      <div class="item">Item 18</div>
      <div class="item">Item 19</div>
      <div class="item">Item 20</div>
      <div class="item">Item 21</div>
      <div class="item">Item 22</div>
      <div class="item">Item 23</div>
      <div class="item">Item 24</div>
      <div class="item">Item 25</div>
      <div class="item">Item 26</div>
      <div class="item">Item 27</div>
      <div class="item">Item 28</div>
      <div class="item">Item 29</div>
      <div class="item">Item 30</div>
      <div class="item">Item 31</div>
      <div class="item">Item 32</div>
      <div class="item">Item 33</div>
      <div class="item">Item 34</div>
      <div class="item">Item 35</div>
      <div class="item">Item 36</div>
      <div class="item">Item 37</div>
      <div class="item">Item 38</div>
      <div class="item">Item 39</div>
      <div class="item">Item 40</div>
  </div>
</div>

.CSS

body {
  margin: 0;
}
.modal {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e9f0f6;
  overflow: hidden;
}
.modal-title {
  background: #FF5722;
  height: 52px;
  text-align: center;
  color: white;
  font-size: 1.40em;
  line-height:  52px;
}
.modal-content {
  height: auto;
}
.button-group {
  display: flex;
}
.button.selected {
  background: #03A9F4;
  color: white;
}
.button {
  flex: 1;
  background: #2196F3;
  color: white;
  height: 26px;
  text-align: center;
  line-height:  26px;
  cursor: pointer;
}
.list {
  overflow-y: scroll;
  height: 100%;
}
.item {
  text-align: center;
  font-size: 1.40em;
  padding: 10px;
}

Answer 1

将以下更改添加到 CSS 中：

1.首先，让你的标题position: fixed;，并给它一个width: 100%。

.modal-title {
  position: fixed;
  width: 100%;
}

2. 对标题执行相同的操作，并添加一个top: 52px;，使其不会位于标题后面。

.button-group {
  top: 52px;
  position: fixed;
  width: 100%;
}

3. 要使列表可滚动，请从.modal类中删除position: absolute;，然后添加一些边距，这样列表就不会隐藏在标题和按钮后面。

.modal {
  position: absolute; //<--- Remove this
}
.modal-content {
  margin-top: 78px;
}

JSFiddle

至于动态高度问题，你不能单独使用CSS来做到这一点。如果您希望按钮或标题更改高度，请参阅此 JavaScript 解决方案。

Answer 2

1. .modal-title{ position: fixed; top: 0; bottom: 0; width: 100%; }

2. .button-group{ position: fixed; top: 52px; width: 100%; }

3. .modal{ overflow: auto; }

现在，某些项目隐藏在标题后面。修复：

.modal-content {
    margin-top: 78px;
}

编辑：哦，亨特更快，对不起