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

7.08.2008 17:02:23
14 ОТВЕТОВ
РЕШЕНИЕ

Кхм ...

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

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

22
1.06.2016 17:26:13

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

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

Я поместил клир в нижней части «страницы» классифицированного 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)

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

2
7.08.2008 17:12:39

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

Попробуйте это:

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>

10
30.11.2016 09:31:03

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

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

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

3
27.01.2013 13:05:01

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

0
7.08.2008 17:47:58

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

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

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

0
7.08.2008 18:21:51

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

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

Я отказался от строго 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
1.06.2013 02:02:43

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

8
23.05.2017 11:46:28

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

Вот пример:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>
0
1.06.2016 18:09:38
Добро пожаловать в переполнение стека! Спасибо за ваш пост! Пожалуйста, не используйте подписи / слоганы в своих сообщениях. Ваш ящик пользователя считается вашей подписью, и вы можете использовать свой профиль, чтобы публиковать любую информацию о себе, которая вам нравится. Часто задаваемые вопросы о подписи / слоганы
Andrew Barber 25.03.2013 08:42:15

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

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 
0
1.06.2016 17:09:44

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

2
21.04.2018 04:26:16

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

0
2.06.2019 14:46:57