保持相同高度的列

我試圖用display: table保持兩列高度相同。我所做的：保持相同高度的列

.col-sm-12 
    aside 
    .main-content

而CSS

.col-sm-12{ 
    display: table; 
    height: 100%; 
} 

aside{ 
    display: table-cell; 
    height: 100%; 
    width: 25%; 
    background: green; 
} 

.main-content{ 
    display: table-cell; 
    height: 100%; 
    width: 75%; 
}

工作的罰款。但是，當我將內容添加到旁邊時，內容就會變得更底了。

來源

2014-11-04 marcelo2605

你需要黯然js的。 – 2014-11-04 11:25:53

首先，您應該使用Bootstrap網格而不是百分比寬度。

也就是說，拿到兩個浮動（動態）列具有相同的高度，你可以使用這一招：

設置overflow: hidden在列父
添加margin-bottom: -5000px; padding-bottom: 5000px到列

工作實施例（我用-xs代替-sm例如目的僅）：

.wrapper { 
 
    overflow: hidden; 
 
} 
 
aside{ 
 
    background: forestgreen; 
 
    padding-bottom: 5000px; 
 
    margin-bottom: -5000px; 
 
} 
 
.main-content{ 
 
    background: tomato; 
 
    padding-bottom: 5000px; 
 
    margin-bottom: -5000px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-xs-12"> 
 
    <div class="row wrapper"> 
 
    <aside class="col-xs-3"> 
 
     Aside<br> 
 
     Aside<br> 
 
     Aside<br> 
 
     Aside<br> 
 
     Aside<br> 
 
     Aside<br> 
 
     Aside<br> 
 
     Aside<br> 
 
     Aside<br> 
 
    </aside> 
 
    <div class="col-xs-9 main-content"> 
 
     Main content<br> 
 
     Main content<br> 
 
     Main content<br> 
 
     Main content<br> 
 
     Main content<br> 
 
    </div> 
 
    </div>

來源

2014-11-04 13:40:29 zessx

此方法使用邊距，填充和溢出來強制列的高度相等。該方法需要在每個浮動元素的底部設置一個足夠大的填充，並在相同元素的底部用相等的負邊距來抵消它。訣竅是將父容器的溢出設置爲隱藏。

這裏是HTML和CSS：

<div class="main"> 
<div class="container clearfix"> 
    <div class="content"> 
     <section> 
      <h1>This is the Main Content</h1> 
      <hr> 
      <h2>A sub heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur...</p> 
     </section> 
    </div> 
    <div class="sidebar"> 
     <aside> 
      <h2>This is a sidebar</h2> 
      Sign up to the newsletter! 
     </aside> 
    </div> 
</div><!-- /.containter -->

.main .container { 
    padding-right: 330px; 
    overflow: hidden; 
} 
.content { 
    float: left; 
    width: 100%; 
    background-color: orange; 
} 
.sidebar { 
    float: right; 
    margin-right: -330px; 
    width: 300px; 
    background-color: olive; 
} 
.content, 
.sidebar { 
    padding-bottom: 99999px; 
    margin-bottom: -99999px; 
} 
section, 
aside { 
    padding: 30px 
}

這可以擴展到多個行的更多網格狀佈局，而不是僅僅兩列。如果需要，還可以使用流體寬度列。

這裏是JS提琴Demo

參考鏈接 http://knowwebdevelopment.blogspot.in/2014/10/css-equal-height-columns-three.html

來源

2014-11-04 12:04:30 harshakasireddy

設置元素100％的高度，西港島線不工作，百達，因爲它着眼於針對該尺寸其父對象。

這是我的建議：

HTML：

<div class="row"> 
    <div class="col-xs-4 tall">25%</div> 
    <div class="col-xs-8 tall">75%</div> 
</div>

CSS：

.tall { 
    border: 2px dotted black; 
    height: 200px; 
}

小提琴： My Solution

來源

2014-11-04 12:45:51 Persijn

保持相同高度的列

回答

相關問題