HTMLレイアウト垂直中心divは小さな高さでヘッダーを重複します

Question

私は、固定サイズのヘッダーと残りのスペースを占める垂直中心のdivで構築されたかなり単純なレイアウトを持っています。

https://jsfiddle.net/jhk7d68s/

<div class="header"> 
    <div class="header_container"> 
     This is some header content 
    </div> 

    <div class="frame_container"> 
     <div class="container"> 
      <div class="frame"> 
       This is the frame content 
       <br /> 
       It stretches across three lines 
       <br /> 
       <img src="http://dummyimage.com/100x100/000/fff"> 
       <br /> 
       And could include a link 
      </div> 
     </div> 
    </div> 

body{padding:0;margin:0;background-position:center center;background-repeat:no-repeat;background-attachment:fixed;background-size:cover;background-color:red;} 

.header{height:100px !important;background:black;width:100%;padding-top:0 !important;} 
.header_container{padding-top:40px;max-width:1000px;margin:auto;color:white;text-align:center;} 

.frame_container{position:absolute;margin-top:50px;top:50%;left:50%;-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);} 

.frame{color:black;background:green;padding:20px;text-align:center;} 

あなたは、たとえばiPhoneの風景モードを画面の高さを減らすまで、すべてがよさそうです。次に、フレームがヘッダーと重なり始める。

私はこれが絶対的な位置にあると仮定していますが、それを修正する方法はわかりません。フレームオーバーラップの代わりにスクロールバーを表示したい。

誰でも正しい方向に向けることができますか？

Answer 1

これはオプションのようですか？

html, body{ 
 
    min-height: 100vh; 
 
    padding:0; 
 
    margin:0; 
 
    } 
 
body{ 
 
    background-position:center center; 
 
    background-repeat:no-repeat; 
 
    background-attachment:fixed; 
 
    background-size:cover; 
 
    background-color:red; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.header{ 
 
    height:100px;background:black;width:100%;padding-top:0; 
 
} 
 
.header_container{ 
 
    padding-top:40px; 
 
    max-width:1000px; 
 
    margin:auto; 
 
    color:white; 
 
    text-align:center; 
 
} 
 
.container{ 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.frame_container { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
.frame{ 
 
    color:black; 
 
    background:green; 
 
    padding:20px; 
 
    text-align:center; 
 
}

<div class="header"> 
 
    <div class="header_container"> 
 
    This is some header content 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="frame_container"> 
 
    <div class="frame"> 
 
     This is the frame content 
 
     <br /> 
 
     It stretches across three lines 
 
     <br /> 
 
     <img src="http://dummyimage.com/100x100/000/fff"> 
 
     <br /> 
 
     And could include a link 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私は小さな画面のためrelativeにそのコンテナのdivのabsolute位置を変更する（そしておそらく、あまりにも他のいくつかの詳細を調整）するmax-height条件を含むメディアクエリを使用します。