Question

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

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

滚动时将页眉固定在顶部（始终可见）
保持按钮固定在标题下方（始终可见）
使项目列表可滚动

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

我很难过，有什么想法吗？

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。要使列表可滚动，请从position: absolute;类中删除.modal，然后添加一些边距，这样您的列表就不会隐藏在标题和按钮后面

.modal {
  position: absolute; //<--- Remove this
}

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

JSFiddle

至于动态高度问题，单独使用CSS无法做到这一点。如果您想要更改高度的按钮或标题，请参阅this JavaScript solution。

Answer 2

.modal-title{ position: fixed; top: 0; bottom: 0; width: 100%; }
.button-group{ position: fixed; top: 52px; width: 100%; }
.modal{ overflow: auto; }

现在有些项目隐藏在标题后面。修正：

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

CSS模态滚动

2 个答案: