在一个fixed布局里有一个div超出滚动，但是top和bottom只有一个起作用(互斥),在如下代码

Question

问题

在一个fixed布局里有一个div超出滚动，但是top和bottom只有一个起作用(互斥),在如下代码

    <div class='dialog'>
      <div class='dialog-cover-layer'></div>
      <div class="dialog-content">
        <li>...</li>
      </div>
    </div>

.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.dialog-cover-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: #000000;
}
.dialog-content {
  width: 500px;
  height: 1000px;
  background: #fff;
  position: absolute;
  top: 56px;
  bottom: 59px;
  left: 50%;
  transform: translate(-50%);
  overflow-y: auto;
}

Answer 1

这里的height不能设置固定值，

.dialog-content{
    height:auto
}

参考：
[https://developer.mozilla.org...]

当top和bottom同时指定时，并且 height没有被指定或者指定为auto的时候，top和bottom​​​​​都会生效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。