CODEWITHSUNDEEP
htmlcss
Miguel Moura
Miguel Moura

Reputation: 39364

Use only max-height to adjust to content height

I have a modal centered horizontally and vertically where body content scrolls when its big.

However when the body content is less than modal height the modal does not resize down to its content.

I tried to use only max-height an not height but then my modal code breaks ...

Note: Run the code in full page to see the blank space under body content

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

How can I solve this?

Upvotes: 0

Views: 275

Answers (1)

Temani Afif
Temani Afif

Reputation: 272734

You can simplify your code like below and rely on flexbox inside the modal instead of 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>

Upvotes: 1

Related Questions