Margin bottom doesn't work with position fixed

user_9833763 0
Viewed 59

I want to create simply modal on the top of my app and I am trying to move this modal from edges like 20-30px and I am trying to use margin there, but margin-top only works and bottom is ignored. I have two use cases: First by using grid I want modal to be centered when the content is not overflowing it and second when the content overflows I want to have margins from top and bottom edges. See this:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0,0,0,.3);
}
.modal {
  width: 500px;
  padding: 3rem;
  margin: 2rem 0;
  background-color: white;
}
<h1>Some content behind</h1>
<div class="background">
   <div class="modal">
     <h1>Some modal</h1>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     
   </div>
</div>

css html
3 Answers

You need to add one extra container to achieve this.

And, use margin: 2rem auto; instead of using display: grid;.

.modal-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0,0,0,.3);
}

.modal-inner {
  width: 500px;
  margin: 2rem auto;
}

.modal {
  padding: 3rem;
  background-color: white;
}
<div class="modal-bg">
  <div class="modal-inner">
    <div class="modal">
      <h1>Some modal</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
    </div>
  </div>
</div>

user_11579520

I found an answer, when parent is in fixed position we actually cannot set margin from bottom. The simpliest solution is to wrap those elements with another div with static position as a default. None additional css rules are needed. Note that when content is smaller than viewport height, modal is fully centered as I expected. Thanks for help!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0,0,0,.3);
}
.modal {
  width: 500px;
  padding: 3rem;
  margin: 2rem 0;
  background-color: white;
}
<h1>Some content behind</h1>
<div class="background">
  <div class="modal__wrapper">
   <div class="modal">
     <h1>Some modal</h1>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     </div>
   </div>
</div>

user_98337630

Remove the height and set the margin in your .background element, this should work:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html, body {
  background-color: lightgray;
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 2rem 0;
}
.modal {
  width: 500px;
  padding: 3rem;
  background-color: white;
  margin: 2rem 0;
}
<h1>Some content behind</h1>
<div class="background">
   <div class="modal">
     <h1>Some modal</h1>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     
   </div>
</div>

user_37895270
Related