将浮动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>

这是fiddle。

Answer 1

您可以将min-height添加到.right和.left div：

.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

修复父级和列的高度

然而，这对于不同数量的文本来说非常灵活，但它是一种选择。