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

您可以使用显示类型＆＃34; flex＆＃34; ＆＃34; 100vh＆＃34;的高度（代表100％视口高度）

将以下属性添加到CSS类中：

$('.resize').bootstrapToggle()

作为旁注：避免在代码中使用表格显示类型（如.container），这种做法在现代UI开发实践方面已经过时了。

Div获得剩余区域的全高

1 个答案: