Выравнивание колонок по высоте при разных разрешениях экрана выглядит так:

При больших разрешениях
 

При меньших разрешениях

Если не применять выравнивание по высоте,  картина будет такой:

Выравнивание контента колонок делается различными способами, можно применять css, но все же этот метод скорей аля-выравнивание, на самом деле нужно измерить высоту каждой колонки и присвоить всем максимальную высоту. С этой задачей легко справляется небольшой javascript на jquery.

script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
jQuery(function($){
//Пишем функцию
  function my_equalH(){
   $('.row-equal-height').each(function(){
    var maxH = 0;
      $('.eq_column', $(this) ).each(function(){
       $(this).css( 'height', 'auto' );
          if( $(this).outerHeight(true) > maxH ){
         maxH = $(this).outerHeight(true);
               }
           });
             if ($(window).width() > '752') {           
               $('.eq_column', $(this) ).css( 'height', maxH + 'px' ); 
                         }
     });
   }
//Вызывает функцию на событие загрузки (можно на document.ready) и на изменение окна браузера
      $(window).on('load', function(){
        my_equalH();
    });
      $( window ).resize(function() {      
        my_equalH();               
        });
});

В этом скрипте применен метод outerHeight(true) для того, чтоб бралась высота с учетом всех отступов. Строчка с цифрой 752 обозначает, что колонки будут выравниваться для ширины окна более 752px (без учета полосы прокрутки 752+16=768px). Это условие задано потому, что в основном при ширине менее 768px происходит перестраивание колонок в одну, и выравнивание уже не нужно. Если у вас другая ширина перестраивания колонок, то возьмите ее, отняв 16px.

Теперь что касается построения html

1
2
3
4
<div class='row-equal-height'>  
<div class='eq_column col1' style='background: red;'>Здесь расположим контент1, который будет выравниваться с контентом2</div>  
<div class='eq_column col2' style="background: yellow;'>Здесь расположим контент2</div>
</div>

Для наглядности колонкам задан фон.

Translate »
Рейтинг@Mail.ru Яндекс.Метрика