Делаем два столбца div равными по высоте - PullRequest
Новая
       4

Делаем два столбца div равными по высоте

1 голос
/ 28 февраля 2011 
<div id="content">
  <div id="leftColumn">
    left column stuff
  </div>
  <div id="rightColumn">
    right column sidebar stuff
  </div>
</div>

Когда левый столбец длиннее правого, фоновое изображение правого столбца обрезается.Как сделать обе колонки одинаковой высоты?(Я попытался применить фоновое изображение к содержимому div, и это решило проблему, но некоторые страницы не используют боковую панель, поэтому я пытаюсь найти другое решение).

столбцы также не могутбыть фиксированной высотой.

Ответы [ 7 ]

8 голосов
/ 28 февраля 2011

Если вам не очень важны IE6 и IE7, самый простой ответ - установить

display: table-cell;

в каждом из ваших столбцов.Просто отметьте http://ie7nomore.com/css2only/table-layout/ для этого чистого решения CSS2.1 (оба столбца являются contenteditable, так что вы можете легко добавлять строки и строки текста в один и / или другой столбец)
И нет, это не так, используя таблицы"как некоторые могут поспорить: значение table свойства CSS display отображается так же, как элемент HTML table, но это все еще семантика div (то есть ни одного) или любого элемента, к которому он применяется;)

Тогда для IE6 и IE7 вы можете использовать условные комментарии для простого отката (например, применить фон к одному из столбцов, а если другой длиннее на некоторых страницах ... не обращайте внимания и забудьте об этом, этостарый IE и ваш текст все еще читабелен)

2 голосов
/ 28 февраля 2011

Если вы не возражаете против использования jQuery, есть плагин, написанный специально для решения этой проблемы.

http://plugins.jquery.com/project/equal-height-columns

2 голосов
/ 28 февраля 2011

Если вы хотите, чтобы оба столбца имели одинаковую высоту, но их содержимое имеет разную длину, вам необходимо установить высоту элементов div.Вы просите, чтобы он был плавным и расширялся до их длины - но вы хотите, чтобы они были такими же, что просто невозможно.

kjy112 предложил хорошее решение с минимальной высотой, но они верны вговоря, что это действительно не работает в IE6 или 7.

Вы можете взглянуть на эту статью: http://css -tricks.com / liquid-width-equal-height-columns / /

Для другого решения вы можете попытаться сделать так, чтобы столбцы всегда расширялись до столбца с наибольшей высотой.Очень хорошее объяснение проблемы здесь: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

1 голос
/ 29 января 2013

Проблема очень проста:

Сначала вы должны добавить класс с именем "elements" в оба столбца, чтобы ваш html выглядел следующим образом: 

<div id="content">
  <div id="leftColumn" class="elements">
    left column stuff
  </div>
  <div id="rightColumn" class="elements">
    right column sidebar stuff
  </div>
</div>

После этого всевам нужно сравнить 2 высоты и установить максимальную высоту наименьшей.Вы делаете это так: 

$(document).ready(function () {
    var highestCol = Math.max($('#leftColumn').height(),$('#rightColumn').height());
    $('.elements').height(highestCol);      
});

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

1 голос
/ 25 января 2012

Я только что натолкнулся на это и увидел, что ни в одном ответе еще нет зеленой метки. Может быть, один из этих методов мог бы помочь ->

http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

(некоторые из них уже упомянуты здесь - но я все еще нахожу это хорошим обзором с плюсами и минусами и большим количеством комментариев)

1 голос
/ 28 февраля 2011

Оберните их в контейнер div и определите его как display:table-row, а два дочерних элемента определите как display:table-cell;height:100%;.Вот как я справился с этим здесь: heyvian.com/html5-css3, и если вы добавите контент на стороне contenteditable, вы увидите, как это работает.

Я сомневаюсь, что это работает в ie6 или ie7.Я не проверял эту страницу для этих браузеров.

0 голосов
/ 28 февраля 2011

Поскольку некоторые страницы не используют боковую панель, вы можете присвоить и идентифицировать свой тег <body> и поменять фон таким образом.Что касается решения, которое работает во всех браузерах, вам не повезло.Я не нашел ни одного. 

#about-me { background: url(about.png) repeat-y; }
#contact { background: url(contact.png) repeat-y; }

<body id="about-me">

или 

<body id="contact">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...