具有相等边距的中心 div.边距底部不适用于高度 100vh?

Question

无论我尝试做什么，我都无法让我的div一直具有相等的边距。

我假设当您将高度设置为 100vh 或 100% 时，底部边距/底部填充不起作用？

我需要它响应，所以 px 值在这里没有用。

我创建了一个小提琴：https://jsfiddle.net/uLmkyqpf/

法典：

.HTML：

<div class="mySec header">
<div class="info">
<ul id="headList">
<li>
<a data-section="top-left" id="link" href="#">ABOUT</a>
</li>
<li>
<a data-section="getInvolved" id="link" href="#">CLASSES</a>
</li>
<li>
<a data-section="footer" id="link" href="#">CONTACT</a>
</li>            
</ul>
<h1 class="title">Niki Gibbs Modern Pilates</h1>
<p class="title2">Working From The Inside Out.</p>
<img id="pilLogo" src="pilatesLog.png">
</div>
</div>

.CSS：

body {
margin: 0;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
background-color: #EFEFEF;
text-align: center;
overflow: hidden;
height: 100%;
width: 100%;
}
.mySec { 
position: relative;
height: 100%;
margin-right: 4%;
margin-left: 4%;
margin-top: 4%;
padding-bottom: 4%;
overflow: hidden;
}
.header {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#FFC0CB, #9370DB); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFC0CB, #9370DB ); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFC0CB, #9370DB); /* For Firefox 3.6 to 15 */
}
#headList {
list-style: none;
font-family: 'Josefin Sans', sans-serif;
position: relative;
left: -1vw;
}
#headList li {
display: inline;
}
#headList li a {
color: #000;
font-size: 1.4vw;
padding: 2vw;
text-decoration: none;
letter-spacing: 2px;
font-weight: 200;
}
.title {
font-family: 'Amatic SC', cursive;
font-size:8vw;
position: relative;
bottom: 8.3vh;
color: #000;
}
.title2 {
color: #000;
position: relative;
font-size: 2vw;
bottom: 14vh;
}
#pilLogo {
position: relative;
left: 25vw;
bottom: 41vh;
}
.info {
position: relative;
top: 25vh;
}

Answer 1

使用前面的 SO 答案作为参考，我修改了您的小提琴以保持整个框的均匀边距。我专门通过将高度和宽度设置为小于视口，然后将框转换为屏幕中间来做到这一点：

.mySec {
display: block;
position: relative;
height: calc(95vh);
width: calc(96vw - 1vh);
transform: translate(calc((4vw + 1vh) / 2), 2.5vh);
overflow: hidden;
}

以下是便于查看的代码段：

body {
margin: 0;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
background-color: #EFEFEF;
text-align: center;
overflow: hidden;
height: 100%;
width: 100%;
}
.mySec {
display: block;
position: relative;
height: calc(95vh);
width: calc(96vw - 1vh);
transform: translate(calc((4vw + 1vh) / 2), 2.5vh);
overflow: hidden;
}
.header {
background: red;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#FFC0CB, #9370DB);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFC0CB, #9370DB);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFC0CB, #9370DB);
/* For Firefox 3.6 to 15 */
}
#headList {
list-style: none;
font-family: 'Josefin Sans', sans-serif;
position: relative;
left: -1vw;
}
#headList li {
display: inline;
}
#headList li a {
color: #000;
font-size: 1.4vw;
padding: 2vw;
text-decoration: none;
letter-spacing: 2px;
font-weight: 200;
}
.title {
font-family: 'Amatic SC', cursive;
font-size: 8vw;
position: relative;
bottom: 8.3vh;
color: #000;
}
.title2 {
color: #000;
position: relative;
font-size: 2vw;
bottom: 14vh;
}
#pilLogo {
position: relative;
left: 25vw;
bottom: 41vh;
}
.info {
position: relative;
top: 25vh;
}

<div class="mySec header">
<div class="info">
<ul id="headList">
<li>
<a data-section="top-left" id="link" href="#">ABOUT</a>
</li>
<li>
<a data-section="getInvolved" id="link" href="#">CLASSES</a>
</li>
<li>
<a data-section="footer" id="link" href="#">CONTACT</a>
</li>
</ul>
<h1 class="title">Niki Gibbs Modern Pilates</h1>
<p class="title2">Working From The Inside Out.</p>
<img id="pilLogo" src="pilatesLog.png">
</div>
</div>

Answer 2

对边距使用相同的百分比值将始终使顶部/底部看起来与左/右不同。

该百分比是根据生成的框包含块。请注意，对于 "边距顶部"和"边距底部"。

https://www.w3.org/TR/CSS2/box.html#propdef-margin

如果您仍然想使用动态值作为保证金，我建议vh或vw。

您的示例已更新：https://jsfiddle.net/uLmkyqpf/2/