CSSフルページ背景の高さ

Question

HTMLコードがある：

CSSで今

<div class="container content"> 
<div class="wrap-container row"> 
    <div class="col-xs-12 col-md-5 text-center text-white left"> 
    <h2 class="mt-5">Contact</h2> 
     <h1> 987 123 456</h1> 
    </div> 
    <div class="col-xs-12 col-md-6 ml-auto right"> 
    <div class="form"> 
     <form> 
      <!-- form controls --> 
     </form> 
    </div> 
    </div>  
</div> 
</div> 

.content.container { 
    height: 80vh; 
    overflow: hidden; 
    box-sizing: border-box; 
} 

.wrap-container { 
    position: relative; 
    height: 80%; 
    border-radius: 5px; 
    background: rgba(0,0,0,.3); 
    overflow: hidden; 
    box-sizing: border-box; 

} 
.left { 
    text-shadow: 0px 1px 2px #808080, 2px 2px 1px rgba(47,171,81, 0.8); 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 


} 
.right { 
    background: rgba(0,0,0,.8); 
    color: #b9b9b9; 
    margin: 2rem; 
    height: 86%; 
    overflow: hidden; 
    box-sizing: border-box; 
} 
.form { 
    overflow: auto; 
    height:99%; 
    padding-right: 3rem; 
    position: relative; 
    width: 110%; 
    left: 0; 
    right: -2rem; 
} 
@media (max-width: 768px) { 
    .content.container { 
     height: 200vh; 
     display: block; 
    } 

    .wrap-container { 
     display: block; 
     height: auto; 
     overflow: auto; 

    } 
    .cb-slideshow li div h3 { 
     line-height: 0; 
    } 
    .right, .left { 
     margin:0; 
    } 
    .right { 
     height: auto; 
    } 
    .form { 
     padding-right: 1.5rem; 
     /*height: auto;*/ 
     display: block; 
    } 
} 

は今、.FORMのdiv要素がverticah高さよりも高くなっているとき（100VH）コンテンツがされカット。電話のような小型デバイスでは、.form divのコンテンツをスクロールすることはできますが、vhのみが表示されているので、表示可能な送信ボタンはありません。/ .content.containerのメディアクエリの高さ200vhに何が追加されましたか。

スクロール可能なdivを内容の高さまで拡張するにはどうすればよいですか？

Answer 1

親の身長に適応している子供は、flexboxを使って解決するのが一番です。

私はラップコンテナをフレックスとして設定し、フレックス方向：子供を積み重ねるときの列に設定しました。私はすべての子供たちに異なる高さを設定することを避けようとします。

次に、overflow-yを追加してフォームにスクロールします。

.wrap-container { 
display: flex; 
flex-direction: column; 
} 
.form { 
overflow-y: scroll; 
} 

あなたが何かachiveしたい場合は、次のオーバーフローの主なコンテナやアイテムのため100VHを：隠されたが、.FORMスクロールは、すべてのデバイスのために、それは次のように行われるべきである：

Fiddle