Установка высоты div в HTML с помощью CSS

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

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>


Изменить: я согласен, что этот пример очень похож на таблицу, и фактическая таблица будет прекрасным выбором. Но моя «настоящая» страница со временем станет менее табличной, и я просто хотел бы сначала освоить эту задачу!

Кроме того, по какой-то причине, когда я создаю / редактирую свои сообщения в IE7, код отображается правильно в режиме предварительного просмотра, но когда я действительно публикую сообщение, форматирование удаляется. Редактирование моего сообщения в Firefox 2, похоже, сработало, FWIW.


Другое редактирование: Да, я не принял ответ GateKiller. Это действительно хорошо работает на моей простой странице, но не на моей более тяжелой странице. Я изучу некоторые ссылки, на которые вы мне указали.

Ответов (14)

Решение

Кхм ...

Короткий ответ на ваш вопрос заключается в том, что вы должны установить высоту 100% для тега body и html, а затем установить высоту на 100% для каждого элемента div, который вы хотите сделать 100% высотой страницы.

На самом деле, 100% высота не подходит для большинства дизайнерских ситуаций - это может быть мало, но это не лучший ответ. Погуглите макеты "любой столбец с самой длинной". Наилучший способ - поместить левый и правый столбцы внутрь оболочки div, поместить левый и правый столбцы в плавучее положение, а затем развернуть оболочку - это заставит ее растянуться до высоты внутренних контейнеров, а затем установить фоновое изображение на внешней оболочке. Но следите за любыми горизонтальными полями на плавающих элементах на случай, если вы получите в IE «ошибку с плавающей точкой двойного поля».

Попробуйте:

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>

Короткий ответ на ваш вопрос заключается в том, что вы должны установить высоту 100% для тега body и html, а затем установить высоту на 100% для каждого элемента div, который вы хотите сделать 100% высотой страницы.

Я отказался от строго CSS и использовал небольшой jquery:

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);

Некоторые браузеры поддерживают таблицы CSS, поэтому вы можете создать такой макет, используя различные display: table-* значения CSS . Более подробная информация о таблицах CSS содержится в этой статье (и в одноименной книге) Рэйчел Эндрю: Все, что вы знаете о CSS, неверно.

Если вам нужен согласованный макет в старых браузерах, которые не поддерживают таблицы CSS, вам нужно сделать две вещи:

  1. Очистите элемент "строка таблицы" от его внутренних плавающих элементов.

    Самый простой способ сделать это - установить, overflow: hiddenчто заботится о большинстве браузеров, и zoom: 1активировать hasLayoutсвойство в более старых версиях IE.

    Есть много других способов очистки плавающих объектов. Если этот подход вызывает нежелательные побочные эффекты, вам следует проверить вопрос, какой метод «clearfix» лучше всего, и статью о разметке для других методов.

  2. Сбалансируйте высоту двух элементов «ячейки таблицы».

    Есть два способа подойти к этому. Либо вы можете создать видимость одинаковой высоты, установив фоновое изображение для элемента «строка таблицы» (метод искусственных столбцов ), либо вы можете добиться совпадения высоты столбцов, задав каждому из них большое отступление и одинаково большое отрицательное поле.

    Искусственные столбцы - это более простой подход, который очень хорошо работает, когда ширина одного или обоих столбцов фиксирована. Другой метод лучше справляется со столбцами переменной ширины (на основе процентных или em-единиц), но может вызвать проблемы в некоторых браузерах, если вы напрямую ссылаетесь на контент в своих столбцах (например, если столбец содержался, <div id="foo"></div>и вы связались с ним #foo)

Вот пример использования техники отступов / полей для балансировки высоты столбцов.

html, body {
  height: 100%;
}

.row {
  zoom: 1;          /* Clear internal floats in IE */
  overflow: hidden; /* Clear internal floats */
}

.right-column,
.left-column {
  padding-bottom: 1000em;  /* Balance the heights of the columns */
  margin-bottom: -1000em;  /*                                    */
}

.right-column {
  width: 20%;
  float: right;
}

.left-column {
  width: 79%;
  float: left;
}
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>

Эта демонстрация Barcamp от Натали Даун также может быть полезна при выяснении того, как добавить дополнительные столбцы и удобные интервалы и отступы: столбцы с одинаковой высотой и другие трюки (также там я впервые узнал о трюке с полями / отступами для балансировки высоты столбцов)

Это должно работать для вас: Установите высоту до 100% в вашем CSS для html и body элементов. Затем вы можете отрегулировать высоту в соответствии с вашими потребностями в div .

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 

Для этого достаточно просто использовать свойство css width .

Вот пример:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>

Нет необходимости писать собственный css, есть библиотека под названием «Bootstrap css», вызывая ее в разделе заголовка HTML, мы можем добиться множества стилей. Вот пример: если вы хотите предоставить два столбца в строке, вы можете просто сделайте следующее:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>

Здесь md означает среднее устройство, вы можете использовать col-sm-6 для небольших устройств и col-xs-6 для сверхмалых устройств.

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

У меня была такая же проблема на моем сайте ( бессовестная затычка ).

У меня был раздел навигации «float: right», а в основной части страницы было фоновое изображение размером около 250 пикселей, выровненное по правому краю и «repeat-y». Затем я добавил к нему что-то со словами «clear: both». Вот свойство W3Schools и CSS clear .

Я поместил очистку внизу классифицированного div "page". Исходный код моей страницы выглядит примерно так.

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

Надеюсь, это поможет :)

Просто пытаюсь помочь здесь, чтобы код был более читабельным.
Помните, что вы можете вставить фрагменты кода, нажав кнопку вверху с надписью «101010». Просто введите свой код, выделите его и нажмите кнопку.

Вот пример:

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

Вот пример столбцов с одинаковой высотой - Столбцы с одинаковой высотой - еще раз.

Вы также можете ознакомиться с идеей «Искусственных столбцов» - Faux Columns.

Не идите по столовому маршруту. Если это не табличные данные, не рассматривайте их как таковые. Это плохо для доступности и гибкости.

Двухколоночный макет немного сложен для работы в CSS (по крайней мере, до тех пор, пока CSS3 не станет практичным).

Перемещение влево и вправо будет работать до определенной точки, но не позволит расширить фон. Чтобы фон оставался сплошным, вам нужно будет реализовать технику, известную как «искусственные столбцы», что в основном означает, что сами ваши столбцы не будут иметь фонового изображения. Ваши 2 столбца будут содержаться внутри родительского тега. Этому родительскому тегу предоставляется фоновое изображение, содержащее 2 цвета столбцов, которые вы хотите. Сделайте этот фон настолько большим, насколько вам нужно (если это сплошной цвет, сделайте его высотой только 1 пиксель) и сделайте так, чтобы он повторял y. У AListApart есть отличное пошаговое руководство о том, что необходимо для его работы.

http://www.alistapart.com/articles/fauxcolumns/

Я могу придумать 2 варианта

  1. Используйте javascript, чтобы изменить размер меньшего столбца при загрузке страницы.
  2. Подделайте равные высоты, вместо этого установив background-colorдля столбца на контейнере <div/>( <div class="separator"/>) с помощьюrepeat-y