How to make 2 floating divs always match their height based on content with CSS?

Question

I have 2 floating divs with JS dynamic content. I need to make them to always match eachother height - perfectly to fill 100% of parent height. How to do this? I know it will be probably marked as duplicate, but I couldnt fit any solution into my current situation (from indeed plenty of results)

 .parent { background-color: red; width: 60%; float: left; margin-bottom: 10px; } .left { float: left; width: 50%; background-color: green; height: 100%; } .right { float: left; width: 50%; background-color: purple; height: 100%; } 

 <div class="parent"> <div class="left"> some <br/>conten <br/>more <br/>content <br/> some <br/>conten <br/>more <br/>content <br/> some <br/>conten <br/>more <br/>content <br/> </div> <div class="right"> some other content <br/> but less lines <br/> need to expand this as well <br/> to match the height of left div </div> </div> <div class="parent"> <div class="left"> some other content <br/> but less lines <br/> need to expand this as well <br/> to match the height of left div </div> <div class="right"> some <br/>conten <br/>more <br/>content <br/> some <br/>conten <br/>more <br/>content <br/> some <br/>conten <br/>more <br/>content <br/> </div> </div> 

Answer 1

Use a flexbox instead of floats.

 .parent { background-color: red; width: 60%; padding: 1%; margin-bottom: 10px; display: flex; } .left { width: 50%; background-color: green; } .right { width: 50%; background-color: purple; } 

 <div class="parent"> <div class="left"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> <div class="right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> 

Answer 2

Instead of floating and specifying height to the child divs use display: flex; which is a CSS3 rule. Be careful, it is not supported by older browsers.

 .parent { background-color: red; width: 60%; display: flex; margin-bottom: 10px; } .left { width: 50%; background-color: green; } .right { width: 50%; background-color: purple; } 

 <div class="parent"> <div class="left"> some <br/>conten <br/>more <br/>content <br/> some <br/>conten <br/>more <br/>content <br/> some <br/>conten <br/>more <br/>content <br/> </div> <div class="right"> some other content <br/> but less lines <br/> need to expand this as well <br/> to match the height of left div </div> </div> <div class="parent"> <div class="left"> some other content <br/> but less lines <br/> need to expand this as well <br/> to match the height of left div </div> <div class="right"> some <br/>conten <br/>more <br/>content <br/> some <br/>conten <br/>more <br/>content <br/> some <br/>conten <br/>more <br/>content <br/> </div> </div> 

Answer 3

您可以使用此jQuery插件http://brm.io/jquery-match-height/