擴展浮動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固定父級和列的高度

但是，這對於可變數量的文本來說並不十分靈活，但這是一個選擇。