CSS: zentrierter Text in div mit min-height: 100% überschreitet seine Grenzen

Question

Ich habe eine Seite mit Abschnitten und der erste Abschnitt hat eine Mindesthöhe von 100% (html und body werden ebenfalls auf 100% gesetzt), damit der erste Abschnitt beim Laden der Seite immer das gesamte Ansichtsfenster ausfüllt. Seit ich das gemacht habe, funktioniert es soweit.

Problem für mich ist, dass ich Text in diesem ersten Abschnitt platzieren möchte, der vertikal und horizontal zentriert ist. Dies funktioniert auch, aber hier ist das Problem:

Ich verringere die Höhe des Browsers -> der Text ist teilweise aus dem Bildfenster. Es ist in Ordnung. Aber wenn ich nach unten scrolle, dann beginnt der zweite Abschnitt bereits, aber der Text überläuft den zweiten Abschnitt und der erste Abschnitt erweitert seine Höhe nicht entsprechend dem zugehörigen Text.

Sorry für mein schlechtes Englisch Ich hoffe du verstehst was ich meine.

Ich dachte min-height bedeutet, dass die Höhe des ersten Abschnitts ändert sich nach der Menge des Textes, aber jedes Mal hat es nur die 100% Ansichtsfensterhöhe und was nicht in diesen Bereich passt überlappt den Abschnitt.

Was könnte da falsch sein?

#section-0-bg-image-red { 
 
    width:100%; 
 
    min-height:100%; 
 
    position:relative; 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
    /* background: some full page image with no-repeat center center fixed; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-size: cover; 
 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='...', sizingMethod='scale'); 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='...', sizingMethod='scale')"; 
 
    */ 
 
    background-color:red; 
 
    } 
 

 
    #section-0-white-overlay { 
 
    background: rgba(255,255,255,0.8); 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    } 
 

 

 
    .outer { 
 
     display: table; 
 
     position: absolute; 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 

 
    .middle { 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
    } 
 

 
    .inner { 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     max-width: 200px; 
 
    \t padding-left: 20px; 
 
    \t padding-right: 20px; 
 
    } 
 

 
    .headline { 
 
     font-size:24px; 
 
     text-align:center; 
 
    } 
 

 
    #section-1-yellow { 
 
     background-color:yellow; 
 
     width:100%; 
 
     height:600px; 
 
    }

<div id="section-0-bg-image-red"> 
 
    \t <div id="section-0-white-overlay"> 
 
    \t \t <div class="outer"> 
 
    \t \t \t <div class="middle"> 
 
    \t \t \t \t <div class="inner"> 
 
    \t \t \t \t \t <div class="headline">text to be centered horizontally and vertically but overlaps the first section when window height is decreased and user scrolls down 
 
         </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t </div> \t \t 
 
    \t </div> 
 
    </div> 
 

 
    <div id="section-1-yellow"></div>

UPDATE mit jQuery Lösung:

Hey,

nach auf diesem noch einige Stunden zu verbringen, fand ich heraus, was aus der Anpassung an den den ersten Abschnitt verhindert Text:

Zum Zentrieren des Textes vert Natürlich musste das div mit der Klasse "outer" absolut positioniert werden, aber auf diese Weise hatte der 100% -Height-Abschnitt "keinen Grund", sich an irgendetwas anzupassen. Schätze, es ist eine der CSS-Grundlagen, aber was weiß ich? Zu klein. ;)

So wies ich die CSS Zentrieren Lösung und entschied sich, indem der padding-top des Textes div auf der Fensterhöhe je eine Art vertikale Zentrierung für den Text mit jQuery zu implementieren:

$(window).on('load resize', function(){ 

var paddingHeight = ($(window).height()/3) - 80; 


$(".inner").css({"padding-top": paddingHeight + "px"});  

}); 

Mag nicht sehr elegant sein, aber es macht was es soll.

Answer 1

Ich denke, ich sehe was du redest. Anstatt min-height mit ich glaube, Sie sollten versuchen, die Höhe der vollen Ansichtsfenster wie diese Einstellung:

height:100vh; 

Das macht, was Element, die diesen Tag ganz gleich das gesamte Ansichtsfenster zu füllen hat, was die Darstellungsgröße ist.

Hier ist ein Link zum JSfiddle. Lass es mich wissen, wenn du das vorhast.

https://jsfiddle.net/w4k6rzsy/1/