Установка высоты 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>

Ответы

Ответ 1

Гм...

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

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

Ответ 2

Попробуйте:

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>

Ответ 3

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

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

  • Сделайте свой элемент "строка таблицы" очищенным внутренним флотированным элементом.

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

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

  • Баланс высоты двух элементов таблицы.

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

    Колонки Faux - это более простой подход и очень хорошо работают, когда фиксируется ширина одного или обоих столбцов. Другая техника лучше справляется с столбцами переменной ширины (на основе процентных или условных единиц), но может вызвать проблемы в некоторых браузерах, если вы напрямую ссылаетесь на контент в своих столбцах (например, если столбец содержит <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>

Ответ 4

Я отказался от строго 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);

Ответ 5

Здесь приведен пример столбцов с равной высотой - Колонки равных высот - пересмотрены

Вы также можете проверить идею "Faux Columns" - Колонки Faux

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

Ответ 6

У меня была такая же проблема на моем сайте (бесстыдный плагин).

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

Я поместил ящик в нижней части раздела "page" class. Мой источник страницы выглядит примерно так.

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)

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

Ответ 7

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

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

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

Ответ 8

Просто попробуйте помочь здесь, чтобы код был более читабельным.
Помните, что вы можете вставлять фрагменты кода, нажав на кнопку вверху с "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>

Ответ 9

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

Ответ 10

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

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

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

Ответ 11

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

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

Ответ 12

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

Вот пример:

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

Ответ 13

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

html {
    height: 100%;
}

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