Сделайте два плавающих элемента CSS той же высотой

У меня есть два элемента, которые могут различаться по высоте и оба плавают рядом друг с другом. Проблема в том, что она выглядит довольно уродливо, если одна коробка выше другой. Поэтому я хочу, чтобы они были одинаковой высоты.

Один из способов, который, как я думал, может работать, также заключался бы в том, чтобы обернуть их в контейнерный div и надеяться, что более высокий его размер изменится, а меньший - для расширения пространства:

HTML:

<div id="outerBox">
<div class="innerBoxLeft"></div>
<div class="innerBoxRight"><br /><br /><br /></div>
</div>

CSS

.outerBox
{
width: 100%;
}

.innerBoxLeft
{
float:left;
width: 45%;
height: 100%;
}

.innerBoxRight
{
float:right;
width: 45%;
height: 100%;
}

Не работает. Я считаю, что это может быть связано с тем, что внешний div не имеет установленной высоты, и по какой-то причине меньшая коробка и 100% высота не имеют ничего общего. Я не могу дать ему высоту набора, потому что это победит точку.

Итак, если нет другого пути, я предполагаю, что задаю вопрос: как установить высоту дочернего элемента в родительский элемент?

Спасибо

Ответ 1

Почему вы не используете таблицу?

Это становится смешным. Пользователь хочет видеть таблицу. Язык HTML предоставляет элемент таблицы для достижения цели, которую хочет пользователь. Тем не менее, мы используем целую библиотеку (я смотрю на ответ JQuery), чтобы достичь цели без таблицы, даже если это означает, что script работает на клиенте!

Ответ 2

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

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

Ответ 3

Существует несколько способов с различной степенью сложности и успеха. Один метод, который работает для меня (~~Я не помню, где я его впервые увидел~~ ссылка, problems):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
        #page {
            clear:both;
            overflow:hidden;
            width:100%;
        }
        #page div {
            margin:0 0 -6000px 0; /* nothing special about 6000px */
            padding:0 0 6000px 0; /* any large enough value will do */
        }
        div.article {
            background:blue;
            float:left;
            width:70%;
        }
        div.sidebar {
            background:red;
            float:right;
            width:30%;
        }
    </style>
</head>
<body>

<div id="page">
    <div class="article">
        <p>Some content</p>
    </div>
    <div class="sidebar">
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
</body>
</html>

Ответ 4

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

Ответ 5

Процентная доля редко работает как высота CSS. Чтобы высота ребенка была такой же, как у их родителя, вы можете использовать немного Javascript. Вот как это выглядит в jQuery:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function() {      
            var containerheight = $("outerBox").height;
            $(".outerBox").children().css("height",containerheight)
    </script>

Если вы хотите просто сделать ящики в контейнере того же размера, у Filament Group есть отличный плагин для выравнивания высоты окна с jQuery, и он очень хорошо документирован:

Равные высоты с помощью jQuery

Ответ 6

Используйте display:table-cell;

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

Просмотрите демо здесь.

Ответ 7

Один из способов сделать следующее без использования JavaScript - это метод, называемый Faux-Columns.

В основном это связано с применением background-image к родительским элементам перемещаемых элементов, что заставляет вас полагать, что эти два элемента имеют одинаковую высоту.

Дополнительная информация доступна по адресу:

Список: Статьи: Колонны эффектов

Ответ 8

Попробуйте следующее: http://www.filamentgroup.com/examples/equalHeights/

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

Ответ 9

Если вы действительно хотели, чтобы div действовал как таблица, вы можете просто настроить css "display" div.

display: таблица для контейнера div

display: table-cell для того, чтобы div внутри выполнял функцию td

Ответ 10

function setSameHeight(class_name){
  var max_height = 0;
  var cards = getElementsByClassName(class_name);       
  for (var i=0; i<cards.length; i++){
    if (cards[i].offsetHeight > max_height){                
      max_height = cards[i].offsetHeight;
    }
  }
  for (var i=0; i<cards.length; i++){
    cards[i].setAttribute("height", max_height);
    cards[i].height = max_height;           
  }
}

function getElementsByClassName(className){
  var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
  var allElements = document.getElementsByTagName("*");
  var results = [];
  var element;
  for (var i = 0; (element = allElements[i]) != null; i++) {
    var elementClass = element.className;
      if (elementClass && elementClass.indexOf(className) != -1 &&     hasClassName.test(elementClass))
      results.push(element);
    }
    return results;
}

используется для таблиц

Ответ 11

function evenup(){
        var maxHeight = Math.max.apply(null, $(".myClass").map(function (){
            return $(this).height();
        }).get());  
    $(".myClass").height(maxHeight);
}