扩展浮动div的高度，直到父div的底部

Question

我有两个div左右浮动。 它们位于父div内，其中隐藏了溢出。 问题是，一个浮动的右边比另一个浮动的要长，而另一个div直到父div的底部才扩展，因此左侧有一个巨大的灰色区域。

这是我的代码：

<div class="content">
 <div class="left">
    Blue Bottle pork belly messenger bag squid narwhal. Yr craft beer iPhone pug, flexitarian PBR&B retro chia wayfarers. Vice seitan DIY, mlkshk single-origin coffee mustache 8-bit butcher farm-to-table dreamcatcher distillery photo booth brunch aesthetic banjo.
 </div>

 <div class="right">
    Wolf forage flannel seitan, vinyl small batch authentic Etsy plaid swag. Ennui ugh fashion axe Helvetica normcore meggings, American Apparel leggings kale chips paleo scenester. Etsy try-hard photo booth, tousled bicycle rights swag Schlitz gentrify chia tattooed pork belly tofu. Raw denim pork belly squid, bespoke sartorial direct trade umami blog Etsy paleo 90's beard roof party letterpress bicycle rights. Butcher street art pour-over, Brooklyn Shoreditch semiotics yr fingerstache fixie Echo Park. Readymade irony gastropub ethical Pitchfork. Skateboard keytar vinyl, deep v lomo tofu gentrify gastropub try-hard Echo Park Cosby sweater Tumblr tote bag.
 </div>

 <div class="clear"></div>
</div>

这是一个小玩意儿 。

Answer 1

您可以在.right和.left div中添加min-height ：

.left, .right{
    min-height:100px;  // or one can select 100% as per requirement
}

Answer 2

选项1：使用背景渐变

http://dabblet.com/gist/2957349/857c8069b850252a5eaf3b06ad243b6f22632952如果您正在寻找纯粹的美学修复方法，则可以考虑沿父级（#content）运行CSS渐变，以模拟两个div的相等高度

选项2：还有其他CSS / HTML选项可用

http://css-tricks.com/fluid-width-equal-height-columns/

选项3：使用JS

http://css-tricks.com/equal-height-blocks-in-rows/

选项4：使用CSS固定父级和列的高度

但是，这对于可变数量的文本来说并不十分灵活，但这是一个选择。