html - 仅使用 max-height 调整内容高度

Question

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

但是，当正文内容小于模态高度时，模态不会缩小到其内容。

我试图只使用最大高度而不是高度，但后来我的模态代码中断了......

注意：整页运行代码可以看到正文内容下的空白处

.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>

我该如何解决这个问题？

标签： htmlcss

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>