Настройка высоты div в HTML с помощью CSS

StackOverflow https://stackoverflow.com/questions/4973

  •  08-06-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

Кхм...

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

На самом деле, 100% высота не будет работать в большинстве ситуаций проектирования - это может быть коротким, но это не очень хороший ответ.Загуглите макеты "любой длины столбца" в Google.Лучший способ - поместить левое и правое столбцы в оболочку 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>

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

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

  1. Сделайте так, чтобы ваш элемент "строка таблицы" очистил свои внутренние плавающие элементы.

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

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

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

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

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

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

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

Вы также можете ознакомиться с идеей "Искусственных колонн" - Искусственные Колонны

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

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

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

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

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)

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

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

<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 для устройств сверхмалого размера

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

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

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

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

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

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

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

Это должно сработать у вас:Установите высоту равной 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>


.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>

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top