我有两个div元素并排。我希望它们的高度是相同的，并保持不变，如果其中一个调整大小。如果其中一个增长是因为放入了文本，那么另一个也应该增长以匹配高度。不过我还是搞不懂这个。什么好主意吗?
<div style="overflow: hidden"> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> </div> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content! </div> </div>
当前回答
你可以使用jQuery轻松实现这一点。
CSS
.left, .right {border:1px solid #cccccc;}
jQuery
$(document).ready(function() {
var leftHeight = $('.left').height();
$('.right').css({'height':leftHeight});
});
HTML
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet.</p>
</div>
你需要包含jQuery
其他回答
这是CSS从未真正有过任何解决方案的领域——你只能使用<table>标记(或使用CSS display:table* values伪造它们)，因为这是唯一实现“保持一堆元素相同高度”的地方。
< span style=" font - family:宋体;"> < span style=" font - family:宋体;"显示:表格单元;" > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > < / div > < span style=" font - family:宋体;"显示:表格单元;" > 一些内容! < / div > < / div >
这适用于所有版本的Firefox, Chrome和Safari，至少版本8的Opera，以及版本8的IE。
小提琴
HTML
<div class="container">
<div class="left-column">
</div>
<div class="right-column">
<h1>Hello Kitty!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
</div>
</div>
CSS
.container {
float: left;
width: 100%;
background-color: black;
position: relative;
left: 0;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.left-column {
float: left;
width: 30%;
height: 100%;
position: absolute;
background: wheat;
}
.right-column {
float: right;
width: 70%;
position: relative;
padding: 0;
margin: 0;
background: rebeccapurple;
}
你可以使用Jquery的等高插件来完成，这个插件使所有的div的高度完全相同。如果其中一个生长了，其他的也会生长。
下面是一个实现示例
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights();
Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400);
Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300);
Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.
这是链接
http://www.cssnewbie.com/equalheights-jquery-plugin/
第一步:设置父div的样式为display: flex
步骤2:设置你的子div样式为flex: 1和高度:100%
解释: Flex: 1将Flex -grow设置为1，这将平均分配容器的剩余空间给所有子容器。
下面是工作的jsfiddle链接
关于flex和父-子div在flex中的行为的更多细节，我建议访问这个链接:css-tricks
Flexbox
对于flexbox，它是一个单一的声明:
.row { 显示:flex;/*儿童身高相等*/ ｝ .col { flex: 1;/*另外，等于宽度*/ 填充:1 em; 边界:固体; ｝ < div class = "行" > <div class="col">我与你同在，我与你同在</div> <div class="col">我爱你，我爱你，我爱你。</div> .</div> .</div> .</div> < / div >
旧浏览器可能需要前缀，请参阅浏览器支持。
