Div 并排背景颜色不填充高度

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>

Div 并排背景颜色不填充高度

Div Side By Side Background Color Not Filling Height

html

css-tables