将浮动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如果您正在寻找一种纯粹的美化效果，那么您可以考虑使用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固定父级和列的高度

然而，对于不同数量的文本，这不会使其非常灵活，但这是一个选择。