等幅の中央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

参照として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/