Установка высоты div в HTML с помощью CSS - PullRequest
Новая
       142

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

34 голосов
/ 07 августа 2008

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

Ответы [ 14 ]

21 голосов
/ 07 августа 2008

Гм ...

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

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

10 голосов
/ 07 августа 2008

Попробуйте: 

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>
8 голосов
/ 23 июня 2009

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

5 голосов
/ 23 июня 2009

Я отказался от строго 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);
3 голосов
/ 07 августа 2008

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

Вы также можете проверить идею «искусственных колонн» - искусственных колонн

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

2 голосов
/ 23 июня 2017

Нет необходимости писать собственный 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 голосов
/ 07 августа 2008

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

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

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

0 голосов
/ 02 июня 2019 

.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 голосов
/ 29 августа 2013

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

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}
0 голосов
/ 24 марта 2013

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

Вот пример: 

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...