平衡左右div的高度，防止右div进入左下div
我有一个HTML页面，内容分为使用CSS左侧和右侧部分。 左侧内容的高度小于正确的内容。 因此，正确的内容div也在左边的content div下面。 最终，正确的内容边界不是一条直线。
- 我们怎样才能避免向左边蔓延正确的内容？
- 我们如何才能使左内容的高度增加到正确内容的高度（用javascript）？
<html> <head> <title>My Page</title> <style type="text/css"> .myContent { width: 100%; } .myHeader { } .leftPart { border: 1px solid blue; width: 200px; clear: left; float: left; background-color: red; } .rightPart { border: 1px solid orange; width: 100%; background-color: beige; } </style> </head> <body> <header> <div class="myHeader"> H </div> </header> <div id="body"> <div class="myContent"> <div class="leftPart"> A </div> <div class="rightPart"> <div > <label for="Sales_and_Marketing">Sales and Marketing</label> <input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" /> </div> <div > <label for="Sales_and_Marketing">Sales and Marketing</label> <input id="Text1" name="SalesAndMarketing" type="text" value="" /> </div> </div> </div> </div> </body> </html>
fLoat一个元素，为另一个元素设置margin 。
.leftPart { border: 1px solid blue; width: 200px; float: left; background-color: red; } .rightPart { margin-left: 200px; border: 1px solid orange; background-color: beige; }
JSBin演示
更新＃1
如果你考虑使用JavaScript，你可能想看看equalize.js 。
equalize.js是一个用于均衡HTML元素height或width的jQuery插件。
这里是一个例子：
// Equalize the height of div element children $('.myContent').equalize({children: '> div'});
这里是JSBin演示 。
更新＃2
如果你正在寻找一个纯粹的CSS解决scheme，你可以使用display: table-cell; CSS声明。
但是 ，说实话，我更喜欢使用JavaScript，而不是使用JavaScript，因为使用表格displaytypes可能会改变Web浏览器在呈现页面时的行为（浏览器可能会将整个页面视为表格）：
#body { display: table; width: 100%; } .myContent { display: table-row; } .leftPart { width: 200px; display: table-cell; } .rightPart { display: table-cell; }
这里是JSBin演示
添加这个样式：
.rightPart { margin-left: 200px; }
