Center div mit gleichen Rändern. Rand-Boden funktioniert nicht mit Höhe 100vh?

Question

Egal, was ich versuche zu tun, ich kann mein Div nicht den ganzen Weg gleiche Ränder haben.

Ich vermute, margin-bottom/padding-bottom funktioniert nicht, wenn Sie die Höhe auf 100vh oder 100% setzen?

Ich brauche es zu reagieren, so dass px Werte hier keine Verwendung sind.

ich eine Geige erstellt haben: https://jsfiddle.net/uLmkyqpf/

Code:

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 als Referenz, ich modified your fiddle einen noch Spielraum um das ganze Feld zu halten. Ich tat dies insbesondere durch die Höhe und Breite kleiner ist als der Darstellungsbereich festlegen und dann die Box in die Mitte des Bildschirms zu übersetzen:

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

Hier ist ein Ausschnitt für die einfache Anzeige:

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

für eine Marge die gleichen Prozentwerte verwendet, wird immer mache das Oben/Unten anders als für links/rechts.

Der Prozentsatz wird mit Bezug auf die Breite des erzeugten berechnet Box des umschließenden Blocks. Beachten Sie, dass dies auch für "margin-top" und "margin-bottom" gilt.

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

Wenn Sie noch einen dynamischen Wert für Ihre Marge verwenden möchten, würde ich entweder vh oder vw vorschlagen.

Ihr Beispiel aktualisiert: https://jsfiddle.net/uLmkyqpf/2/