如何使1个缩略图的高度等于2个相邻的div

我有3个包含文本的引导缩略图。其中2个缩略图位于屏幕宽度的左侧50%，第3个缩略图位于右侧50%。第三个应该是堆叠在一起的两个左侧缩略图的高度。

我无法得到我的第三个div，它占据了屏幕的右侧50%来拉伸屏幕的整个高度，甚至是左侧div的高度。

无论如何都要这么做？

这是我的代码

<body>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-12 col-lg-offset-0">                 
            <!-- Contact with Map - START -->
            <div class="row">
                <div class="col-md-6 col-lg-6">
                    <div class="col-md-12 col-lg-12">
                        <div class="thumbnail thumbnail-Green">
                            <div>
                                    <h5>
                                        Green Green Green Green Green Green Green Green Green Green Green Green Green Green 
                                        Green Green Green Green Green Green Green Green Green Green Green Green Green Green 
                                        Green Green Green Green Green Green Green Green Green Green Green Green Green Green 
                                        Green Green Green Green Green Green Green Green Green Green Green Green Green Green 
                                    </h5>
                            </div>
                        </div>
                    </div><!--END:  row div-->
                    <div class="col-md-12 col-lg-12">
                        <div class="thumbnail thumbnail-Red">
                            <div>
                                    <h5>
                                       Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red 
                                       Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red 
                                       Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red 
                                       Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red 
                                    </h5>
                            </div>
                        </div>
                    </div><!--END:  row div-->
                </div><!--END: address col div-->
                <div class="col-md-12 col-lg-6">
                    <div class="col-md-12 col-lg-12">
                       <div class="thumbnail thumbnail-Blue">
                            <div>
                                    <h5>
                                        Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue
                                        Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue
                                        Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue
                                        Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue
                                    </h5>
                            </div>
                        </div>
                    </div><!--END:  row div-->
                </div><!--END: address col div-->
            </div><!--END: address col div-->
        </div><!--END: controlscol div-->
    </div><!--END: controls row div-->
</body>

你在找这样的东西吗？

.stretch-to-viewport
    height: 100vh

这将使您的div始终拉伸到"屏幕"（视口）的高度。vh代表视口高度。

相关内容

最新更新

热门标签：