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

您可以使用“flex”显示类型和“100vh”高度(代表 100% 视口(viewport)高度)实现这一点

将以下属性添加到您的 CSS 类:

.container {
    height: 100vh;
}

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

附带说明:避免在代码中为 div 使用表显示类型，例如 .container，就现代 UI 开发实践而言，这种做法已经非常过时了。