Хранить столбцы с одинаковой высотой

Question

Я пытаюсь сохранить две колонки с одинаковой высотой, используя display: table. То, что я сделал:

.col-sm-12 
    aside 
    .main-content 

И КСС

.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%; 
} 

работал отлично. Но когда я добавлял контент в сторону, контент идет на дно.

Answer 1

Прежде всего, вы должны использовать сетку 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>

Answer 2

Этот метод использует поля, прокладки и переполнение для принудительного выравнивания столбцов. Методология предполагает установку достаточно большого заполнения в нижней части каждого плавающего элемента и противодействие ему с равным отрицательным запасом в нижней части тех же элементов. Хитрость заключается в том, чтобы скрыть переполнение контейнера родителя.

Вот 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

Answer 3

Настройка высоты элемента до 100% Виля не Allways работы, потому что она смотрит на его родительский объект для этого размера.

Это то, что я предлагаю:

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