Div残りの部分の高さを取得

Question

問題があります。私は、デスクトップ版のページの右側の列の中央垂直で画像表示をしたい、この

<style> 
.container { 
    padding: 20px; 
    display: table; 
    background: darkgrey; 
} 
.title-wrap, .content-wrap { 
    width: 100%; 
    float: left; 
} 

.img-wrap { 
    float: right; 
    height: 100%; 
} 

.img-wrap img { 
    width: 100%; 
} 

@media screen and (min-width: 768px) { 
    .img-wrap { 
     width: 40%; 
    } 

    .title-wrap, .content-wrap{ 
     width: 51%; 
    } 
} 

@media screen and (min-width: 1220px) { 
    .content-wrap { 
     width: 100%; 
    } 
} 

<div class="container"> 
<div class="img-wrap"> 
    <img src="http://www.gstatic.com/webp/gallery/5.jpg" /> 
</div> 

<div class="title-wrap"> 
    <h1>Title here</h1> 
    <h3>Subtitle here</h3> 
    <p>Aenean egestas quam nisi, nec eleifend lectus vehicula aliquet</p> 
</div> 

<div class="content-wrap"> 
    <p>Sed auctor, nibh at semper fringilla, justo ante sollicitudin ligula, sed rutrum dui nisl ac diam. Nulla feugiat diam porta quam blandit ultricies. Curabitur rutrum eget nunc non mollis. Morbi orci lectus, fermentum vel purus id, elementum volutpat diam. Duis mauris eros, dapibus sit amet cursus lobortis, ultrices nec metus. Proin at est tempor velit malesuada scelerisque ut aliquet velit. Fusce at luctus sem. Suspendisse condimentum blandit est, sit amet vestibulum nisi commodo eu. Duis laoreet dolor lacus, vitae pellentesque augue varius vel. Mauris facilisis, libero id consectetur luctus, massa eros sodales eros, in sodales felis felis quis urna. Quisque sodales nibh ipsum, eget tristique diam bibendum nec. Maecenas maximus magna efficitur nulla faucibus vulputate. In hac habitasse platea dictumst. Praesent sit amet sapien non nibh rhoncus bibendum. Mauris varius felis elit, ut luctus neque feugiat non.</p> 
    <p>Sed posuere dolor erat, in lacinia felis sodales sit amet. Sed pulvinar finibus nisl, a pellentesque odio tincidunt id. Nulla blandit pellentesque nisi, vel fringilla tellus. In posuere laoreet urna, vel convallis nunc tempor non. Proin libero purus, semper eget tincidunt luctus, dapibus vitae risus. Nullam mattis feugiat sapien, vitae facilisis leo dapibus non. Mauris lobortis sem lectus, sed auctor quam egestas euismod. Sed ornare enim maximus, dictum tortor vitae, lobortis nisi. Cras et urna dignissim, vehicula purus eu, rhoncus sem. Ut tristique accumsan ante, id eleifend ipsum.</p> 
</div> 

などの画像、タイトルと内容：私は3つのdiv要素を持つページを持っています（幅768pxから1220pxまでのデバイス）、現在は画像divの一番上にあります。私はこの問題は画像divの高さのために発生します。私は一日中Googleを持っているが、解決策はないようだ。この仕事をするのを手伝ってもらえますか？

ありがとうございます。

P/s：私はjsfiddleを作成しましたhere。

Answer 1

あなたが表示タイプ「フレックス」と「100VH」の高さとそれを達成することができますが

があなたのCSSクラスに次の属性を追加します（100％のビューポートの高さの略）：

.container { 
    height: 100vh; 
} 

.img-wrap { 
    height: 100vh; 
    display: flex; 
    align-items: center; 
} 

副作用として、コード内の.containerなどのdivの表の表示タイプを使用しないでください。この方法は、現代のUI開発の方法では時代遅れです。