鍍金池/ 問(wèn)答/HTML/ 使用 bootstrap ，怎么使兩列高度相同

使用 bootstrap ，怎么使兩列高度相同

clipboard.png

<div class="row">

<div class="col-md-2 sidebar">列1</div>
<div class="col-md-10 content">列2</div>

</div>

列1比列2的高度要高，怎么處理呢？

使用JS可以強(qiáng)制使兩列等高，但是如果列2要添加內(nèi)容，就會(huì)溢出，怎么辦
var sidebarHeight = $('.sidebar').height();
$('.content').height(sidebarHeight);

回答
編輯回答
絯孑氣

ul.main-content.row>li.col-lg-2.col-md-3.col-xs-12.col-sm-3.left+li.col-lg-10.col-md-9.col-xs-12.col-sm-9.right

.main-content{

 overflow: hidden;

zoom: 1;
}

.left,
.right{

 margin-bottom: -3000px;

padding-bottom: 3000px;
}

這里直接介紹我認(rèn)為的最佳的側(cè)邊欄/分欄高度自動(dòng)相等方法。核心的CSS代碼如下（數(shù)值不固定）：
margin-bottom:-3000px; padding-bottom:3000px;
再配合父標(biāo)簽的overflow:hidden屬性即可實(shí)現(xiàn)高度自動(dòng)相等的效果。

摘自 張?chǎng)涡?日志

2017年10月6日 15:42
編輯回答
我甘愿

參考flex布局方式

2017年10月13日 14:36