Question

无论我尝试做什么，我都无法让我的div获得相同的利润。

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

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

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

代码：

HTML：

inn = open("/storage/emulated/0/input.txt", "r")
a = 0
b = 10
array = []

while not a == b:
     for i, line in enumerate(inn):
         if i == a:
              array += str(line)
     a+=1
print(array)

CSS：

 <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 1

使用this previous SO answer作为参考，我modified your fiddle在整个框内保持均匀的边距。我通过将高度和宽度设置为小于视口，然后将框翻译到屏幕中间来实现此目的：

.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

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

百分比是根据的宽度计算的生成的框包含块。请注意，这是真的 'margin-top'和'margin-bottom'也是如此。

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

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

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

中心div具有相等的边距。边距底部不适合高度100vh？

2 个答案: