Question

我有带有页眉和页脚的模态。我希望正文可以滚动，因为内容很长，但是正文的高度应该在页脚开始的地方结束。

当前，身体的高度与页脚重叠，因此您无法在身体底部看到内容。

我不知道设备的高度。如何使正文在页眉和页脚之间保持动态并从上到下滚动并能够看到所有元素？

PS：页眉高度是动态的，因此我不知道该值，但是可以设置底部高度

body {
  width:450px;
  background:#f4f4f4;
  margin:0 auto;
}

.modal {
  visibility:visible;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  background: #fff;
  width:inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.modal-header {
  background: gray;
  padding:20px;
}

.modal-body {
  -webkit-box-flex: 1;
  flex-shrink: 1;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: scroll;
  display: block;
  position: fixed;
  height: 100%;
}

.modal-footer {
  display: block;
  -webkit-box-flex: 0;
  flex-shrink: 0;
  z-index: 1;
  background:#FFF;
  bottom: 0;
  height: auto;
  position: fixed;
  width:100%;
  padding:10px;
  
}

<body>
  <div>
  <p>
  content
  </p>
  </div>
  <div class='modal'>
    <div class='modal-header'>
      <input type='text'/>
      <input type='text'/>
    </div>
    <div class='modal-body'>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>a</div>
      <div>b</div>
      <div>c</div>
      <div>d</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>too long</div>
      <div>LAST VISIBLE ELEMENT</div>

    </div>
    <div class='modal-footer'>
      <button>
      click
      </button>
    </div>
  </div>

</body>

Answer 1

您清楚地说过，可以设置底部高度。

假定模态页脚的高度，并使用calc属性

设置主体的高度

因此，除了页脚内容的高度外，它将占用整个高度。

尝试一下

    body {
      width:450px;
      background:#f4f4f4;
      margin:0 auto;
    }

    .modal {
      visibility:visible;
      bottom: 0;
      display: flex;
      flex-direction: column;
      height: 100%;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 10;
      background: #fff;
      width:inherit;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .modal-header {
      background: gray;
      padding:20px;
    }

    .modal-body {
      -webkit-box-flex: 1;
      flex-shrink: 1;
      -webkit-overflow-scrolling: touch;
      overflow-x: hidden;
      overflow-y: scroll;
      display: block;
      position: fixed;
      margin-bottom:50px;
      height: calc(100% - 100px);/*Added height here*/
    }

    .modal-footer {
      display: block;
      -webkit-box-flex: 0;
      flex-shrink: 0;
      z-index: 1;
      background:#FFF;
      bottom: 0;
      height: auto;
      position: fixed;
      width:100%;
      padding:10px;
      
    }

    <body>
      <div>
      <p>
      content
      </p>
      </div>
      <div class='modal'>
        <div class='modal-header'>
          <input type='text'/>
          <input type='text'/>
        </div>
        <div class='modal-body'>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>a</div>
          <div>b</div>
          <div>c</div>
          <div>d</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>too long</div>
          <div>LAST VISIBLE ELEMENT</div>

        </div>
        <div class='modal-footer'>
          <button>
          click
          </button>
        </div>
      </div>

    </body>

Answer 2

请参阅此答案 How to put scrollbar only for modal-body in bootstrap modal dialog

.modal-dialog{
   overflow-y: initial !important
}
.modal-body{
   height: 250px;
   overflow-y: auto;
}

页眉和页脚之间的模态主体可动态滚动到末尾

2 个答案: