我有两个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>
我几乎已经尝试了上面提到的所有方法,但是flexbox解决方案不能正确地与Safari一起工作,网格布局方法也不能正确地与旧版本的IE一起工作。
这个解决方案适合所有屏幕,并且是跨浏览器兼容的:
.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}
@media (max-width: 767px){
.container li { display: inline-block; width:100%; min-height:auto!important;}
}
上面的方法将等于单元格的高度,对于较小的屏幕,如手机或平板电脑,我们可以使用上面提到的@media方法。
我有同样的问题,所以我创建了这个小函数使用jquery jquery是每个web应用程序的一部分。
function fEqualizeHeight(sSelector) {
var sObjects = $(sSelector);
var iCount = sObjects.length;
var iHeights = [];
if (iCount > 0) {
$(sObjects).each(function () {
var sHeight = $(this).css('height');
var iHeight = parseInt(sHeight.replace(/px/i,''));
iHeights.push(iHeight);
});
iHeights.sort(function (a, b) {
return a - b
});
var iMaxHeight = iHeights.pop();
$(sSelector).each(function () {
$(this).css({
'height': iMaxHeight + 'px'
});
});
}
}
您可以在页面就绪事件时调用此函数
$(document).ready(function(){
fEqualizeHeight('.columns');
});
我希望这对你有用。
如果你不介意其中一个divs是一个主人,并口述两个divs的高度,有这个:
小提琴
无论如何,右边的div会扩展或压缩&溢出来匹配左边的div的高度。
两个div都必须是容器的直接子节点,并且必须在容器中指定它们的宽度。
相关的CSS:
.container {
background-color: gray;
display: table;
width: 70%;
position:relative;
}
.container .left{
background-color: tomato;
width: 35%;
}
.container .right{
position:absolute;
top:0px;
left:35%;
background-color: orange;
width: 65%;
height:100%;
overflow-y: auto;
}