CSS：最小高さのdivの中央揃えテキスト：100％がその罫線をオーバーフローします

Question

セクションがあるページがあり、最初のセクションの最小高さは100％です（HTMLと本文も100％に設定されています） ）最初のセクションは常にページの読み込み時にビューポート全体を塗りつぶします。私はこれまでこれをやったので、それまでは動作しています。

問題は、縦と横の中央にあるこの最初のセクションの内側にテキストを配置したいということです。これも機能しますが、ここに問題があります：

ブラウザの高さが低くなります - テキストが部分的にビューポートから外れてしまいます。それは大丈夫です。しかし、私が下にスクロールすると、2番目のセクションはすでに始まっていますが、テキストは2番目のセクションをオーバーフローし、最初のセクションはそれに属するテキストに従って高さを伸ばしません。

私の悪い英語で申し訳ありませんが、私はあなたが私の言いたいことを理解していただきたいと思います。

私は、最初のセクションの高さがテキストの量に応じて変化するが、それが100％のビューポートの高さを持つだけで、このスペースに収まらないものがセクションに重なっていることを意味します。

何が間違っている可能性がありますか？

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

jQueryの溶液でUPDATE：への適応から最初のセクションを防止するもの

ねえ、

この上でいくつかのより多くの時間を過ごした後、私は見つけましたテキスト：

テキストの中央にする厳密に言えば、クラス「外側」を持つdivは絶対的に配置する必要がありましたが、100％の高さセクションには何にも適応する「理由はありませんでした」。 CSSの基本の1つだと思いますが、私は何を知っていますか？少なすぎる。 ;）

だから私は、CSS中心にソリューションを却下し、ウィンドウの高さに応じて、テキストのdivのパディングトップを設定することで、jQueryを使ってテキストの垂直方向のセンタリングのいくつかの種類を実装することを決定した：

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

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


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

}); 

非常にエレガントではないかもしれませんが、それは想定されていることをします。

Answer 1

私はあなたが話していることを見ていると思います。むしろmin-heightを使用するよりも、私はあなたがこのような完全なビューポートに高さを設定してみなければならないと思う：

height:100vh; 

これは関係なく、ビューポートのサイズが何であるかをビューポート全体を埋めていないものは何でもそのタグを持つ要素になります。

ここにはJSfiddleへのリンクがあります。それがあなたが念頭に置いていたものかどうか私に教えてください。

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