How to make 1 thumbnails height equal to the 2 adjacent divs
Question
I have 3 bootstrap thumbnails with text in them. 2 of the thumbnails are on the left 50% of the screen width and the 3rd is on the right 50%. The 3rd should be the height of the 2 left hand side thumbnails stacked on top of each other.
I cant get my 3rd div which takes up the right 50% of the screen to stretch the full height of the screen or the even the height of the left hand side divs.
Anyway to do this?
Here is my code
<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>
1 answers
solution1
0 ACCPTED 2016-04-15 13:52:34
Are you looking for something like this?
.stretch-to-viewport
height: 100vh
This will make your div always stretch to whatever the height of the "screen" (viewport) is. vh stands for viewport height.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.