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

Question

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

40

html css

Источник

user404 07 авг '08 в 17:02

13 ответов

Решение

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

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

Источник

user383 07 авг '08 в 17:33

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

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

Сделайте так, чтобы ваш элемент "строки таблицы" очистил свои внутренние плавающие элементы.
Самый простой способ сделать это - установить overflow: hidden который заботится о большинстве браузеров, и zoom: 1 вызвать hasLayout свойство в более старых версиях IE.
Есть много других способов очистки поплавков, если этот подход вызывает нежелательные побочные эффекты, вы должны проверить вопрос, какой метод 'clearfix' является лучшим, и статью о том, как создать макет для других методов.
Сбалансировать высоту двух элементов "ячейка таблицы".
Есть два способа подойти к этому. Либо вы можете создать видимость одинаковой высоты, установив фоновое изображение в элементе "строки таблицы" (метод искусственных столбцов), либо вы можете настроить высоту столбцов, указав для каждого большой отступ и одинаково большое отрицательное поле.
Поддельные столбцы - это более простой подход, который очень хорошо работает, когда ширина одного или обоих столбцов фиксирована. Другой метод лучше справляется со столбцами переменной ширины (в процентах или единицах 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

Источник

user5168 23 июн '09 в 00:09

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

Источник

user9604 22 июн '09 в 23:18

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

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

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

3

Источник

user283 07 авг '08 в 17:39

Не нужно писать собственный 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

Источник

user8203775 23 июн '17 в 10:01

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

У меня была навигационная секция "float: right", а в основной части страницы было фоновое изображение около 250 пикселей в поперечном направлении, выровненное вправо и "repeat-y". Затем я добавил что-то с "ясно: оба" к нему. Вот 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

Источник

user1384652 07 авг '08 в 17:07

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

Вот пример:

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

0

Источник

user2194160 24 мар '13 в 14:48

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

0

Источник

user383 07 авг '08 в 17:47

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

html {
    height: 100%;
}

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

0

Источник

user2086668 29 авг '13 в 07:55

.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

Источник

user11590170 02 июн '19 в 17:46

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

Источник

user194 07 авг '08 в 17:13

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

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

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

0

Источник

user392 07 авг '08 в 18:21

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

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

0

Источник

user653 08 авг '08 в 03:35

Другие вопросы по тегам html css

user137 07 авг '08 в 18:24 2008-08-07 18:24 · Accepted Answer · 2008-08-07 18:24

Кхм...

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

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