Как сделать 1 миниатюру высотой, равной 2 смежным divs

У меня есть 3 эскизов начальной загрузки с текстом в них. 2 эскизов слева - 50% ширины экрана, а третий - справа 50%. Третий должен быть высотой двух эскизов левой стороны, уложенных друг на друга.Как сделать 1 миниатюру высотой, равной 2 смежным divs

Я не могу получить свой третий div, который занимает 50% экрана, чтобы растянуть всю высоту экрана или даже высоту левых боковых разделов.

В любом случае, чтобы это сделать?

Вот мой код

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

источник

2016-04-15 Fearghal

предоставьте скрипку – Atula

уверен, однако скрипка не выкладывает их так, как я их вижу локально .... я думаю, что я построил скрипку неправильно и не установил бутстрап для использования, может быть? – Fearghal

https://jsfiddle.net/8cky1d5g/# – Fearghal

Вы ищете что-то вроде этого?

.stretch-to-viewport 
    height: 100vh

Это приведет к тому, что ваш div всегда будет растянут на любую высоту «экрана» (видовой области). vh обозначает высоту видового экрана.

источник

2016-04-15 13:52:34

hmmm thx Себастьян. будет ли это делать divs над другими ontrols, если они в пути .... сказать нижний колонтитул внизу страницы? – Fearghal

Это зависит от положения. Если они не фиксированы или абсолютны, все должно быть хорошо, вы также можете использовать 'z-index', чтобы определить, как элементы лежат друг над другом. –

хорошо, вы можете показать мне, как я реализую это в своем коде? – Fearghal

Как сделать 1 миниатюру высотой, равной 2 смежным divs

ответ

Смежные вопросы