Question

我有一个水平和垂直居中的模式，主体内容在其大时滚动。

但是，当身体内容小于模态高度时，模态不会调整为其内容大小。

我尝试仅使用max-height而不是height，但是我的模态代码中断了...

注意：整页运行代码以查看正文内容下方的空白

.cover {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  height: 100%;
  left: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 200;
}

.modal {
  background-color: white;
  margin: 10% auto;
  max-width: 400px;
  height: 60vh;
  max-height: 60vh;
  position: relative !important;
}

.scrollView {
  position: relative;
  border: 2px solid red;
  height: calc(60vh - 100px);
  margin: 50px 0;
  top: 50px;
  overflow: scroll;
  z-index: 800;
}

div.header {
  display: flex;
  align-items: center;
  height: 50px;
  max-height: 50px;
  top: 0;
  position: absolute;
  background: lightgreen;
  width: 100%;
  z-index: 900;
  justify-content: space-between;
}

.header div {
  padding: 0 20px;
}

div.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  height: 50px;
  background: orange;
  width: 100%;
}

.body {
  overflow-y: scroll;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
  <div class="modal">
    <div class="header">
      <div>Header</div>
      <div><a href="#">Close</a></div>
    </div>
    <div class="scrollView">
      <div class="body">
        Body short content
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</div>

我该如何解决？

Answer 1

您可以像下面那样简化代码，并依赖于模式内部的flexbox而不是position：absolute;

.cover {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal {
  background-color: white;
  max-width: 400px;
  width:100%;
  max-height: 60vh;
  display:flex; 
  flex-direction:column;
}

.scrollView {
  flex-grow:1;
  border: 2px solid red;
  overflow: auto;
}

div.header,
div.footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background: lightgreen;
  padding: 0 20px;
  flex-shrink:0;
}

div.footer {
  background: orange;
  justify-content: center;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
  <div class="modal">
    <div class="header">
      <div>Header</div>
      <div><a href="#">Close</a></div>
    </div>
    <div class="scrollView">
      <div class="body">
        Body <br>short <br>content
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</div>

仅使用最大高度来调整内容高度

1 个答案: