Div Side By Side Цвет фона Не заполняющая высота

Question

Я знаю, что по теме div написано много тем, но я не смог найти решение для моей конкретной проблемы. Мне удалось получить 2 divs бок о бок и быть мобильными (не требуется прокрутка в сторону), но есть проблема с цветом фона. Если 1 div имеет небольшой текст, а div рядом с ним нет, то отсутствующие блоки высоты просто показывают пустое место вместо фона. Как я могу исправить это, оставаясь мобильным?

Пример страницы: http://www.gloryhood.com/articles/ztest.html

CSS:

div.table { 
max-width: 100%; 
} 
div.firsthalf { 
background-color: #ffffff; 
float: left; 
max-width: 50%; 
text-align: left; 
word-wrap: break-word; 
} 
div.secondhalf { 
background-color: #ffffff; 
margin-left: 50%; 
max-width: 50%; 
text-align: left; 
word-wrap: break-word; 
} 

HTML:

<div class="table"> 
<div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci 
</div> 
<div class="secondhalf"> 
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt 
</div> 
<div class="firsthalf"> 
Leftcvni 
</div> 
<div class="secondhalf"> 
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt 
</div> 
<div class="firsthalf"> 
Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci 
</div> 
<div class="secondhalf"> 
Righvid 
</div> 
</div> 

Answer 1

Я думаю, что вы хотите что-то вроде этого,

$(document).ready(function(){ 
 
     $('.container').each(function(){ 
 
      var firstDiv = $(this).find('.firsthalf'); 
 
      var secondDiv = $(this).find('.secondhalf'); 
 
      if(firstDiv.height() >= secondDiv.height()){ 
 
       secondDiv.css('height',firstDiv.height()); 
 
      } else { 
 
       firstDiv.css('height',secondDiv.height()); 
 
      } 
 
     }); 
 
    });

body{background: #39b1a4;} 
 
    div.table { 
 
    max-width: 100%; 
 
} 
 
div.firsthalf { 
 
    background-color: #ffffff; 
 
    float: left; 
 
    width: 50%; 
 
    text-align: left; 
 
    word-wrap: break-word; 
 
    
 
} 
 
div.secondhalf { 
 
    background-color: #ffffff; 
 
    width: 50%; 
 
    text-align: left; 
 
    word-wrap: break-word; 
 
    float: right; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="table"> 
 
    <div class="container"> 
 
     <div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci 
 
     </div> 
 

 
     <div class="secondhalf"> 
 
     Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt 
 
     </div> 
 
    </div> 
 

 
    <div class="container"> 
 
     <div class="firsthalf"> 
 
     Leftcvni 
 
     </div> 
 

 
     <div class="secondhalf"> 
 
     Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt 
 
     </div> 
 
    </div> 
 

 
    <div class="container"> 
 
     <div class="firsthalf"> 
 
     Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci 
 
     </div> 
 

 
     <div class="secondhalf"> 
 
     Righvid 
 
     </div> 
 
    </div> 
 
</div>