Установка ВЫСОТА Div в HTML с помощью CSS

голоса
32

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

Задан 07/08/2008 в 18:02
источник пользователем
На других языках...                            


14 ответов

голоса
21

Кхм ...

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

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

Ответил 07/08/2008 в 19:24
источник пользователем

голоса
10

Дайте этому попытку:

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>

Ответил 07/08/2008 в 18:33
источник пользователем

голоса
8

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

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

  1. Сделайте свой элемент «строка таблицы» очистить внутренние плавал элементы.

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

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

  2. Баланс высоту двух элементов «ячеек таблицы».

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

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

Ответил 23/06/2009 в 01:09
источник пользователем

голоса
5

Я разочаровался в строго 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);
Ответил 23/06/2009 в 00:18
источник пользователем

голоса
3

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

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

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

Ответил 07/08/2008 в 18:39
источник пользователем

голоса
2

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

Здесь мкр стоит для среднего устройства ,, вы можете использовать COL-SM-6 для небольших устройств и Col-хз-6 для дополнительных небольших устройств

Ответил 23/06/2017 в 10:01
источник пользователем

голоса
2

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

Я был раздел нав «Поплавок: правый» и основная часть страницы имеет фоновое изображение о 250px по выравниваются вправо и «повторить-у». Затем я добавил что - то с «ясно: как» к нему. Вот W3Schools и CSS ясно свойство .

Я поставил прозрачный в нижней части страницы «» классифицироваться дел. Мой исходный код страницы выглядит примерно так.

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)

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

Ответил 07/08/2008 в 18:07
источник пользователем

голоса
0

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

Ответил 02/06/2019 в 17:46
источник пользователем

голоса
0

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

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 
Ответил 29/08/2013 в 08:55
источник пользователем

голоса
0

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

Вот пример:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>
Ответил 24/03/2013 в 15:48
источник пользователем

голоса
0

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

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

голоса
0

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

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

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

Ответил 07/08/2008 в 19:21
источник пользователем

голоса
0

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

Ответил 07/08/2008 в 18:47
источник пользователем

голоса
0

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

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more