Question

如果单击邮件图标，则会打开一个模态。该模式已应用padding: 41px 0;。但是，如果视口的高度小于接触形式的高度，则忽略模态的padding-bottom，并且发送/重置按钮正好在视口的底部。

如何在这些按钮和视口底部之间留出一些空间？

HTML：

<div id="modal">
   <div id="contact-form">
      <form>
         <input type="text" />
         <input type="text" />
         <textarea></textarea>
   </div>
</div>

CSS：

#modal {
    padding: 41px 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.87);
    text-align: center;
    -webkit-transition: opacity 350ms, visibility 350ms;
    transition: opacity 350ms, visibility 350ms;
    overflow: auto;
    z-index: 1;
}
#contact-form {
    display: inline-block;
    max-height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 1

这里最好的选择是从内部元素中移除hacky translateY(-50%)/top:50%内容，让flexbox为您完成工作。而是将其添加到外部元素：

#contact {
   -webkit-display: flex;
   display: flex;
   justify-content: center;
   align-items: center;
}

这将使内部元素垂直和水平居中。

Answer 2

在滚动计算时，浏览器不会考虑填充。

如果您的模态是视口高度的100％且内部元素长于此值，则底部对模态元素的填充将不会在底部提供额外的空间。相反，为内部元素添加一个边距，这将向下推动您的滚动，并在底部为您提供所需的填充。

因此，如果你看一下这个例子，你可以看到内部元素的下边距给你底部的空间。如果你拿走底部边距并在模态（外部）元素上放置一些底部填充，则底部没有空间。

＆＃13;

body, html { margin: 0;padding: 0; }
.modal {
   height: 90vh;
   margin: 5px auto;
   background: silver;
   overflow: scroll;
 }
 
 .inner {
    height: 150%;
    width: 75px;
    background: green;
    margin: 2em;
   }

＆＃13;

<div class="modal">
  <div class="inner">Hiya</div>
</div>

＆＃13;

Answer 3

所以，我找到了一个黑客，让我的hacky垂直居中工作没有flexbox！我所要做的就是在#contact-form中包裹<table><tr><td>。然后我将padding: 22px 0;添加到td。据推测这是有效的，因为即使桌子超出了容器，桌子也会占用空间。

CSS - 垂直居中的div忽略父填充底部

3 个答案: