保证金底部不适用于 position 已修复

Question

我想在我的应用程序顶部创建简单的模态，我试图从 20-30px 这样的边缘移动这个模态，我试图在那里使用边距，但边距顶部只有效，底部被忽略。 我有两个用例：首先通过使用网格，当内容没有溢出时，我希望模态居中；其次，当内容溢出时，我希望从顶部和底部边缘获得边距。 看到这个：

 * { 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>

Answer 1

您需要添加一个额外的容器来实现这一点。

并且，使用margin: 2rem auto; 而不是使用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>

Answer 2

我找到了答案，当父级处于固定 position 时，我们实际上无法从底部设置边距。 最简单的解决方案是用另一个 div 包装这些元素，默认情况下是 static position。 不需要额外的 css 规则。 请注意，当内容小于视口高度时，模态完全居中，正如我预期的那样。 感谢帮助！

 * { 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>

Answer 3

删除height并在.background元素中设置margin ，这应该可以：

 * { 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>