Question

我正在尝试获取一个模态窗口，其大小将使其内容高达窗口高度的80％，然后滚动。我还需要关闭按钮（由右上角的“X”表示）以保持固定。这就是我到目前为止所做的：

HTML

<div>
  <div class="dialog-overlay"></div>
  <div class="dialog" style="left:75%;">
    <span class="close">X</span>
    <div class="dialog-wrap">
      <div class="dialog-content">
        <!-- Long amounts of content here -->
      </div>
    </div>
  </div>
</div>

CSS

.dialog-overlay {
  background-color: rgb(0, 0, 0);
  position: fixed;
  z-index: 88;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.dialog {
  background-color: rgb(66, 66, 66);
  position: absolute;
  height: 80%;
  max-height: 80%;
  width: 40%;
  top: 50%;
  left: 50%;
  z-index: 89;
  border-width: 1px;
  border-style: solid;
  border-color: #666;
  border-radius: 5px;
  box-shadow: 4px 4px 80px #000;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.dialog .close {
  position: absolute;
  top: 0px;
  right: 20px;
}

.dialog-wrap {
  overflow-y: auto;
  height: 100%;
}

.dialog-content {
  color: #ccc;
  padding: 20px;
}

使用这段代码，我得到了下面的codepen，但我被卡住了。右边的那个按预期工作，但是左边的那个内容很小的那个太大了，有不必要的空白空间。如果我从.dialog注释掉“height：80％”，左边的那个是固定的，但是右边的滚动停止正常工作。我不想设置高度，但内部内容似乎需要滚动由于某种原因，即使我认为max-height也应该这样做。

http://codepen.io/evshell18/pen/QNPyGr

具有最大高度的可滚动模态仅与其内容一样高

0 个答案: