I'm trying to create a simple modal with this CSS code

.modal {  
  max-width: 700px;
  position: fixed;  
  margin: auto;
  background: #000;
  color: #eee;
  top: 5%;
  left: 0;
  right: 0;
  bottom: 5%;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;  
}

This is fully responsive but I want use bottom: auto instead of bottom: 5%
Because that way if I don't have a lot of content in it, the height will adjust based on the content.

The problem is when I have lot of content in it, I can no longer scroll down.

CodePudding user response：

Using the position:fixed style cannot adjust by content because position: fixed style is set in accordance to the window.

if you want scrolling you will need to address the element that you have inside your modal that contains the content. On the content container you can use the overflow-y: auto to make it scroll when more content is in the element.

.modal {  
      max-width: 700px;
      position: fixed;  
      margin: auto;
      background: #000;
      color: #eee;
      top: 5%;
      left: 0;
      right: 0;
      max-height: 80%;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto;  
    }

    <div >
      <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>

CodePudding user response：

You should use max-height property along with bottom:auto for this.

.modal-container {
  max-width: 700px;
  max-height: 400px;
  position: fixed;
  margin: auto;
  background: #000;
  color: #eee;
  top: 5%;
  left: 0;
  right: 0;
  bottom: auto;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

<div  id="modal-overlay"></div>
<div >
  <div >
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut numquam iure sapiente! Itaque similique aliquam sed eveniet, voluptatum quia enim sit dignissimos animi, laborum nisi iure expedita ut obcaecati nemo. Ipsum sed et illo quisquam tenetur vitae
      eos iure inventore itaque. Neque eaque itaque officiis eum distinctio error qui laudantium at! Dicta dolores inventore hic sit repellat, neque quos facere. Blanditiis enim incidunt quo expedita consequuntur ipsam eveniet molestiae ratione vitae
      cupiditate esse, at nam magnam velit delectus architecto numquam totam cum, perferendis neque quasi sed libero ducimus. Culpa, reprehenderit. Debitis eius sequi, porro quidem explicabo illum quasi placeat atque quo! Rerum repellat ipsam adipisci
      perferendis iusto perspiciatis quasi hic quis qui, at modi odit in optio vero tempora dolorum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, velit perspiciatis. Fuga excepturi quia laborum ipsam, alias repellendus. Tempore
      nam ducimus, nulla recusandae nostrum quibusdam neque accusamus ipsum assumenda aspernatur! Neque quis rem iusto quibusdam? Voluptatem pariatur explicabo facere suscipit qui voluptates itaque. Provident dolor esse obcaecati consequuntur voluptatibus,
      quos id quisquam deleniti libero neque aut facere! Accusamus, similique dolores? Commodi quaerat assumenda architecto sequi corrupti adipisci tempore aspernatur, dolor totam nesciunt accusamus, in repellat facilis quis recusandae perferendis ipsam
      ipsa nulla vitae natus quam? Labore cum nobis eveniet repudiandae? Quo tenetur blanditiis accusamus labore qui dolor rerum dolorum debitis! Commodi modi magni officiis repellendus fugiat nulla, doloremque itaque blanditiis cum dolorem ipsam incidunt
      sunt, qui, repudiandae facilis! Quos, ratione. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti saepe dolores earum debitis. Ipsam quidem, repellat laborum sunt voluptatum, quam praesentium sequi necessitatibus quae debitis ad!
      Placeat modi harum ab! Amet quos aliquam accusantium cum perspiciatis nisi debitis explicabo. Saepe maiores corrupti quisquam, tempore, veritatis animi odit magni dolor eveniet delectus quas exercitationem. Blanditiis, dicta aliquid. Doloremque
      suscipit magnam culpa. Aliquid architecto voluptatum nobis aspernatur sit! Quaerat adipisci officiis vitae ut minima officia quasi at maiores corporis nostrum dolores quisquam illo suscipit nam repellat aperiam tempore iusto, dolore magnam delectus.Lorem
      Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</div>
</div>