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

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

html css twitter-bootstrap

Html 如何使1个缩略图的高度等于2个相邻的div,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有3个带文本的引导缩略图。其中两个缩略图位于屏幕宽度的左侧50%，第三个缩略图位于右侧50%。第三个应该是两个左手侧缩略图堆叠在一起的高度我无法得到我的第三个div，它占据了屏幕右侧的50%来拉伸屏幕的全部高度，甚至是左侧div的高度不管怎样，你想这么做吗这是我的密码 <body> <div class="row"> <div class="col-sm-8 col-sm-offset-2 col-md-8 col-md-offset

我有3个带文本的引导缩略图。其中两个缩略图位于屏幕宽度的左侧50%，第三个缩略图位于右侧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

代表视窗高度。

请提供一个提琴确保，但提琴没有按照我在本地看到的方式布置……我认为我构建的提琴不正确，可能没有设置要使用的引导？如果你想在JSFIDLE中使用引导，你可以简单地将引导模板分叉，引导3已经包括在内，并粘贴您的代码：hmmm thx Sebastian。这是否会使div超过其他控件（如果它们碍事的话）。。。。比如说页面底部的页脚？这取决于位置。如果它们不是固定的或绝对的，也可以使用

z-index

来确定元素是如何放置在彼此之上的。