以下是我的示例:http://torjinx.me
如果单击邮件图标,则会打开一个模态。该模式已应用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%);
}
答案 0 :(得分:1)
这里最好的选择是从内部元素中移除hacky translateY(-50%)/top:50%
内容,让flexbox为您完成工作。而是将其添加到外部元素:
#contact {
-webkit-display: flex;
display: flex;
justify-content: center;
align-items: center;
}
这将使内部元素垂直和水平居中。
答案 1 :(得分:0)
在滚动计算时,浏览器不会考虑填充。
如果您的模态是视口高度的100%且内部元素长于此值,则底部对模态元素的填充将不会在底部提供额外的空间。相反,为内部元素添加一个边距,这将向下推动您的滚动,并在底部为您提供所需的填充。
因此,如果你看一下这个例子,你可以看到内部元素的下边距给你底部的空间。如果你拿走底部边距并在模态(外部)元素上放置一些底部填充,则底部没有空间。
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;
答案 2 :(得分:0)
所以,我找到了一个黑客,让我的hacky垂直居中工作没有flexbox!我所要做的就是在#contact-form
中包裹<table><tr><td>
。然后我将padding: 22px 0;
添加到td
。据推测这是有效的,因为即使桌子超出了容器,桌子也会占用空间。