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

39 css html

Chris Farmer 7.08.2008 17:02:23

14 ОТВЕТОВ

РЕШЕНИЕ

Кхм ...

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

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

22

Polsonby 1.06.2016 17:26:13

Добро пожаловать в переполнение стека! Спасибо за ваш пост! Пожалуйста, не используйте подписи / слоганы в своих сообщениях. Ваш ящик пользователя считается вашей подписью, и вы можете использовать свой профиль, чтобы публиковать любую информацию о себе, которая вам нравится. Часто задаваемые вопросы о подписи / слоганы

Andrew Barber 25.03.2013 08:42:15

Teifion · Answer 1

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

У меня была навигационная секция «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)

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

Adam Haile · Answer 2

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

GateKiller · Answer 3

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

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>

Развернуть фрагмент

Rich Reuter · Answer 4

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

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

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

GateKiller · Answer 5

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

Dan Herbert · Answer 6

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

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

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

Ricky · Answer 7

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

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

mxmissile · Answer 8

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

georgebrock · Answer 9

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

user2194160 · Answer 10

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

Вот пример:

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

Palm Int Srv · Answer 11

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

html {
    height: 100%;
}

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

pragadeesh mahendran · Answer 12

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

aspirew · Answer 13

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

Развернуть фрагмент