保持相同高度的列 [英] Keep columns with same height

问题描述

我正在尝试使用 display: table 保持两列具有相同的高度.我做了什么:

.col-sm-12在旁边.main-content

和 CSS

.col-sm-12{显示:表；高度:100%；}在旁边{显示:表格单元格；高度:100%；宽度:25%；背景:绿色；}.main-content{显示:表格单元格；高度:100%；宽度:75%；}

工作正常.但是当我将内容添加到一边时，内容会进入底部.

解决方案

首先，你应该使用 Bootstrap 网格而不是百分比宽度.

也就是说，要使两个浮动(和动态)列具有相同的高度，您可以使用以下技巧:

• 在父列上设置 overflow: hidden
• add margin-bottom: -5000px;padding-bottom: 5000px 到列

工作示例(我使用 -xs 而不是 -sm 仅用于示例目的):

.wrapper {溢出:隐藏；}在旁边{背景:森林绿；填充底部:5000px；底边距:-5000px；}.main-content{背景:番茄；填充底部:5000px；底边距:-5000px；}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="样式表"/><div class="col-xs-12"><div class="行包装器"><aside class="col-xs-3">旁白<br>旁白<br>旁白<br>旁白<br>旁白<br>旁白<br>旁白<br>旁白<br>旁白<br></一边><div class="col-xs-9 main-content">主要内容
主要内容
主要内容
主要内容
主要内容

I'm trying to keep two columns with same height using display: table. What I did:

.col-sm-12
   aside
   .main-content

And the 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%;
}

Worked fine. But when I added content to aside, the content goes to de bottom.

解决方案

First, you should use Bootstrap grid instead of width in percents.

That said, to get two floating (and dynamic) columns to have the same height, you can use this trick:

• set overflow: hidden on the columns parent
• add margin-bottom: -5000px; padding-bottom: 5000px to the columns

Working example (I used -xs instead of -sm for example purpose only):

.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>

这篇关于保持相同高度的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！