Установка высоты 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. Это действительно хорошо работает на моей простой странице, но не на моей более тяжелой странице. Я изучу некоторые ссылки, на которые вы мне указали.
Ответы 14
У меня была такая же проблема на моем сайте (бесстыдная пробка).
У меня была навигационная секция «float: right», а в основной части страницы было фоновое изображение размером около 250 пикселей, выровненное по правому краю и «repeat-y». Затем я добавил к нему что-то со словами «clear: both». Вот W3Schools и CSS свойство clear.
Я поместил очистку внизу классифицированного div "page". Исходный код моей страницы выглядит примерно так.
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)
Надеюсь, это поможет :)
Просто пытаюсь помочь здесь, чтобы код был более читабельным. Помните, что вы можете вставить фрагменты кода, нажав кнопку вверху с надписью «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>
Попробуйте:
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>Вот пример столбцов одинаковой высоты - Столбцы одинаковой высоты - еще раз
Вы также можете ознакомиться с идеей «Faux Columns» - Искусственные колонны
Не идите по столовому маршруту. Если это не табличные данные, не рассматривайте их как таковые. Это плохо для доступности и гибкости.
Короткий ответ на ваш вопрос заключается в том, что вы должны установить высоту 100% для тега body и html, а затем установить высоту на 100% для каждого элемента div, который вы хотите сделать 100% высотой страницы.
Двухколоночный макет немного сложен для работы в CSS (по крайней мере, до тех пор, пока CSS3 не станет практичным).
Перемещение влево и вправо будет работать до определенной точки, но не позволит расширить фон. Чтобы фон оставался сплошным, вам придется реализовать технику, известную как «искусственные столбцы», что в основном означает, что сами столбцы не имеют фонового изображения. Ваши 2 столбца будут содержаться внутри родительского тега. Этому родительскому тегу предоставляется фоновое изображение, содержащее 2 цвета столбцов, которые вы хотите. Сделайте этот фон настолько большим, насколько вам нужно (если это сплошной цвет, сделайте его высотой не более 1 пикселя) и сделайте так, чтобы он повторял y. У AListApart есть отличное пошаговое руководство о том, что необходимо для его работы.
Кхм ...
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
На самом деле, 100% высота не подходит для большинства дизайнерских ситуаций - это может быть мало, но это не лучший ответ. Погуглите макеты "любой столбец с самой длинной". Лучший способ - поместить левый и правый столбцы внутрь оболочки div, разместить левый и правый столбцы, а затем развернуть оболочку - это заставит ее растянуться до высоты внутренних контейнеров - затем установить фоновое изображение на внешней оболочке. Но следите за любыми горизонтальными полями на плавающих элементах на случай, если вы получите в IE «ошибку с плавающей точкой двойного поля».
Я могу придумать 2 варианта
- Используйте javascript, чтобы изменить размер меньшего столбца при загрузке страницы.
- Подделайте одинаковые высоты, установив
background-colorдля колонки на контейнере<div/>вместо (<div class = "separator"/>) сrepeat-y.
Я отказался от строго 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);
Некоторые браузеры поддерживают таблицы 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 от Натали Даун также может быть полезна при выяснении того, как добавить дополнительные столбцы и хороший интервал и отступы: Столбцы одинаковой высоты и другие хитрости (также там я впервые узнал о трюке с полями / отступами для балансировки высоты столбцов)
Для этого достаточно просто использовать свойство css width.
Вот пример:
<style type = "text/css">;
td {
width:25%;
height:100%;
float:left;
}
</style>
Это должно сработать для вас: установите высоту на 100% в CSS для элементов html и body. Затем вы можете отрегулировать высоту div в соответствии с вашими потребностями.
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%; /* Set Div Height */
}
Нет необходимости писать собственный 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 для сверхмалых устройств.
.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>
Добро пожаловать в Stack Overflow! Спасибо за ваш пост! Пожалуйста, не используйте подписи / слоганы в своих сообщениях. Ваш ящик пользователя считается вашей подписью, и вы можете использовать свой профиль для публикации любой информации о себе, которая вам нравится. FAQ по подписям / слоганам