Div獲得剩餘區域的全高

Question

我遇到問題。我有3個div的頁面：圖像，標題和內容是這樣

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

我想在桌面版本在頁面的右邊欄的中心垂直圖像顯示（寬度從768px到1220px的設備），但目前它位於圖像div的頂部。我客串這個問題是因爲圖像div的高度而發生的。我整天都有谷歌，但似乎沒有解決方案的作品。你能幫我做這個工作嗎？

提前致謝。

P/s：我創建了jsfiddle here。

Answer 1

可以實現與顯示類型「柔性」和「100vh」的高度（代表100％的視口的高度）

添加以下屬性到你的CSS類：

.container { 
    height: 100vh; 
} 

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

作爲一個方面說明：避免在你的代碼中使用表格顯示類型作爲div，例如.container，這種做法在現代UI開發實踐中已經過時了。