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开发实践中已经过时了。