CSS中的固定位置和溢出滚动

Question

我有固定位置的模态形式。

HTML：

<div class="wrap">
  <div class="box">
    <div class="header">
      Form header
    </div>
    <div class="content">
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
      Content Content Content Content Content Content Content Content Content Content Content
    </div>
  </div>
</div>

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box {
  position: fixed;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  max-height: calc(100% - 50px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}

.content {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  max-height: 100%;
  overflow-y: scroll;
}

JSFiddle

Answer 1

您可以使用flexbox，它可以很好地处理标题和内容区域的动态高度。

将容器设置为display：flex；flex-direction:column；，将内容设置为flex:1；，这样它就可以展开以获取除头之外的所有可用空间。

.wrap {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.box {
  position: fixed;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  max-height: calc(100% - 50px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 2px;
}
.content {
  flex: 1;
  padding: 10px;
  border-top: 1px solid #ddd;
  overflow-y: auto;
}

<div class="wrap">
  <div class="box">
    <div class="header">
      Header
    </div>
    <div class="content">
      <div style="height:2000px;">Content</div>
    </div>
  </div>
</div>