中心div等分利潤。保證金底部不適用於高度100vh？

無論我嘗試做什麼，我都無法讓我的div始終保持相同的利潤率。中心div等分利潤。保證金底部不適用於高度100vh？

當我將高度設置爲100vh或100％時，我認爲margin-bottom/padding-bottom不起作用？

我需要它作出響應，所以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; 
}

來源

2017-07-07 Benjamin Gibbs710

使用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>

來源

2017-07-07 12:17:38 sorayadragon

完美！謝謝 –