Содержание
html — Как растянуть блок на всю высоту страницы?
Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:
* {
margin: 0;
padding: 0;
}
html,
body,
.wrapper {
height: 100%;
}
.content {
box-sizing: border-box;
min-height: 100%;
padding-bottom: 90px;
}
.footer {
height: 80px;
margin-top: -80px;
}
И разметка:
<div>
<div>
<p>ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй </p>
<p>ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц </p>
<p>ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу </p>
<p>ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк </p>
<p>еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее </p>
</div>
<div></div>
</div>
При этом min-height: 100%
работает ТАК:
Если СОДЕРЖИМОГО МАЛО у блока
content
, то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта (wrapper
— это 100% от высотыbody
,body
— это 100% от высотыhtml
, аhtml
— это 100% от высотыviewport
). При этом у блока content есть нижнийpaddind
-буфер отрицательный, а у блока блокаfooter
есть отрицательныйmargin
, который позволяет в случае, когда много содержимого, «наползти» на этотpadding
-буфер.Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке
content
), то высота определяется содержимым — содержимое растягивает.
Еще раз повторю, чтобы все запомнили — если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше — пожалуйста, если сможешь растянуть содержимым), если много — высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.
Как растянуть блок на всю высоту экрана с помощью CSS
» Как растянуть блок на всю высоту экрана с помощью CSS
В сегодняшней статье я расскажу, как растянуть блок на всю высоту экрана с помощью CSS.
Вам понравится способ, так как он легкий, без множества строк в коде. А самое главное – он эффективный.
Пожалуй, начну из проблемной ситуации, с которой не так легко выйти. Финальное решение задачи, естественно, я предоставлю.
Итак, о проблеме.
Если вы верстальщик, я уверен, что вы сталкивались с такой ситуацией, когда нужно было растянуть блок на всю высоту экрана.
Итак, самый простой способ.
Пример в HTML:
<div> <h4>BLOGGOOD.RU</h4> </div>
в CSS:
#hei { height: 100vh; background:#ccc; }
Благодаря единице измерений «vh» со значением «100», блок примет высоту на вес экран.
vh – это единица измерений, которую можно расшифровать, как viewport height, высота области просмотра.
1vh равен одному проценту от высоты области просмотра.
Между прочим, есть еще и единица измерений «vw».vw — это единица измерений, которую можно расшифровать, как viewport width, ширина области просмотра.
Если вам по каким-то причинам не нравится верхний код, можете воспользоваться вот таким:
#hei { height: 100%; width:100%; position: absolute; background:#ccc; }
Если и это вам не подошло, тогда вы сможете воспользоваться JS.
Всем пока!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, Вебмастеру, для сайта
расширьте высоту div на всю веб-страницу
Есть ли способ расширить высоту div на всю веб-страницу с помощью css?
Я не использую
.height
{
height:100%;
}
Но это будет распространяться только на высоту содержимого внутри div. Div должен охватывать всю веб-страницу, даже если внутри нее находится всего 1 строка контента.
css
Поделиться
Источник
user544079
14 апреля 2011 в 23:54
5 ответов
- Наложение изображения на всю веб-страницу
Можно ли наложить повторяющееся изображение на всю веб-страницу? Если да, то как?
- Создание столбцов на всю высоту страницы
Мне чертовски трудно сделать три столбца (не верхний или нижний колонтитул, а все, что содержится в div с классами colmask и threecol. Какие-нибудь намеки? Веб-сайт http://pacecarz.com / Я сделал тело и теги html имеют высоту 100%. Я попытался сделать #wrapper div высотой 100% и colmask div…
5
Убедитесь, что все родительские элементы имеют заданную высоту.
html / тело / и т.д.
Элемент будет принимать 100% высоты своих родителей, но только в том случае, если родитель делает HAVE высоты.
100% заданной высоты приведет к другой заданной высоте 😉
Поделиться
Edwin
15 апреля 2011 в 11:52
3
Используйте свойство min-height
.
.height {
min-height: 100%;
}
Но это очень зависит от контекста, который вы не предоставили.
Поделиться
alex
14 апреля 2011 в 23:56
1
<div><!-- make a <div> to hold everything in.. -->
<div>blah blah blah</div>
<div>blah blah blah</div>
</div>
Поделиться
Unknown
14 апреля 2011 в 23:57
0
Это сработало для меня:
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wholepage {
height: 100%;
width: 100%;
background: red;
color: white;
font-weight: 800;
font-size: 22px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div>
Simple Test
</div>
</body>
</html>
Поделиться
ohmusama
15 апреля 2011 в 00:03
0
Возможно, вам придется указать высоту для элементов <html>
и <body>
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>extend div height to entire webpage</title>
<style type="text/css">
html, body {
height:100%;
}
#tehDiv {
height:100%;
background:red;
}
</style>
</head>
<body>
<div>Example</div>
</body>
</html>
Поделиться
Richard JP Le Guen
15 апреля 2011 в 00:08
Похожие вопросы:
Как растянуть всю высоту div с помощью CSS?
Как растянуть всю высоту div с помощью CSS? Я пытаюсь растянуть div 100%. Applied min-height: 100%; , но безрезультатно.
Как установить высоту div как 100%?
Я создаю пустой Div. Я стараюсь, чтобы дать высоту, как 100% за этот пустой див в стиле , потому что мне нужно показать элемент div на всю страницу браузера на экране, но я не в состоянии дать…
Div не покрывает всю страницу?
Я сделал фон, который должен покрывать всю страницу. Я знаю, что для большинства из вас это простой вопрос, но я перепробовал все!!! Каждый раз, когда я что-то пробую, это просто покрывает…
Наложение изображения на всю веб-страницу
Можно ли наложить повторяющееся изображение на всю веб-страницу? Если да, то как?
Создание столбцов на всю высоту страницы
Мне чертовски трудно сделать три столбца (не верхний или нижний колонтитул, а все, что содержится в div с классами colmask и threecol. Какие-нибудь намеки? Веб-сайт http://pacecarz.com / Я сделал…
Расширение элементов на всю высоту ячейки таблицы?
Я пытаюсь создать таблицу строк, каждая из которых имеет некоторое содержимое в некотором элементе блока (я использую DIV в этом примере для простоты), элемент которого я хочу растянуть на всю…
Элемент, не покрывающий всю высоту
У меня есть ошибка при установке цвета фона … У меня есть сайт, структура которого примерно такая: <body> <div id=container> my stuff В файле CSS я хочу установить фоновое изображение…
Как сделать контейнер div на всю высоту экрана?
Итак, я делаю свое первое приложение iOS HTML5, и это просто простое приложение для цитат. Мне нужно выяснить, как сделать так, чтобы мой контейнер div был на всю высоту iphone. Вот jsfiddle моего…
контейнер div не растягивается на всю высоту родителя
Я пытаюсь заставить контейнер div растянуться на всю высоту родителя. Как вы можете видеть, родитель (тело) имеет информационный цвет, а контейнер-основной. Цвет контейнера должен растягиваться на…
html div не занимает всю высоту браузера
Я пытаюсь разделить экран на две секции, так что в основном ширина 50%, и каждая секция должна занимать всю высоту браузера. Но я не могу заполнить всю высоту как показано на рисунке ниже он…
Как сделать мой на всю высоту страницы?
Я только что сделал div высоты 100% на этой странице, но (по крайней мере, в Chrome и Chromium) есть небольшие верхние и Нижние поля. Я хочу, чтобы div покрывал их, но я не хочу прибегать к использованию на заданной высоте, так как я буду использовать одну и ту же настройку на нескольких страницах.
css
html
height
Поделиться
Источник
Jules
11 февраля 2012 в 19:32
2 ответа
- Создание столбцов на всю высоту страницы
Мне чертовски трудно сделать три столбца (не верхний или нижний колонтитул, а все, что содержится в div с классами colmask и threecol. Какие-нибудь намеки? Веб-сайт http://pacecarz.com / Я сделал тело и теги html имеют высоту 100%. Я попытался сделать #wrapper div высотой 100% и colmask div…
- расширьте высоту div на всю веб-страницу
Есть ли способ расширить высоту div на всю веб-страницу с помощью css? Я не использую .height { height:100%; } Но это будет распространяться только на высоту содержимого внутри div. Div должен охватывать всю веб-страницу, даже если внутри нее находится всего 1 строка контента.
4
Все ли ваши элементы html, body и div имеют border:0 и margin:0?
Поделиться
Joe
11 февраля 2012 в 19:39
2
Установите границы, поля и отступы равными 0.
Поделиться
elrado
11 февраля 2012 в 19:46
Похожие вопросы:
Сделать элемент div растянутым на всю высоту страницы
Я построил этот маленький ap в angular и хотел бы, чтобы элемент контейнера растягивался на всю высоту страницы, когда содержимое не заполняет высоту страницы, например, на большом экране эта…
Растяните боковую панель на всю высоту страницы
У меня есть вот что: http://jsfiddle.net/s75ew662/7 / Как растянуть левую боковую панель (серую) на всю высоту страницы? .container { width: 750px; margin: 0 auto; } .sidebar { width: 200px;…
Как сделать элемент на всю высоту страницы?
Есть ли способ, которым я мог бы установить элемент DIV, чтобы он занимал всю высоту страницы? Что-то вроде: div.left { height: 100%; width: 50%; background-color: blue; position: absolute; top: 0;…
Создание столбцов на всю высоту страницы
Мне чертовски трудно сделать три столбца (не верхний или нижний колонтитул, а все, что содержится в div с классами colmask и threecol. Какие-нибудь намеки? Веб-сайт http://pacecarz.com / Я сделал…
расширьте высоту div на всю веб-страницу
Есть ли способ расширить высоту div на всю веб-страницу с помощью css? Я не использую .height { height:100%; } Но это будет распространяться только на высоту содержимого внутри div. Div должен…
CSS — пролет элементов div на всю высоту страницы
Я закодировал свои дивы так, чтобы они (почти) выглядели идеально. Правильные дивы находятся выше/ниже друг друга, и они охватывают всю ширину страницы. Что я нахожу, так это то, что он не…
Как сделать контейнер div на всю высоту экрана?
Итак, я делаю свое первое приложение iOS HTML5, и это просто простое приложение для цитат. Мне нужно выяснить, как сделать так, чтобы мой контейнер div был на всю высоту iphone. Вот jsfiddle моего…
Как сделать так, чтобы изображение занимало всю высоту и ширину div?
У меня есть следующий элемент заголовка определенными: <div class=header> <div class=row> <div class=col-md-8 col-xs-12> <h4 class=heading>Heading info here</h4>…
Сделать навигационный div развернутым на всю высоту страницы
У меня есть навигационный div слева от моей страницы. Я хочу, чтобы он занимал всю высоту страницы. Ниже приведены html и css для структуры. #wrapper{ position: relative; min-height: 100%; height:…
Ответ я пытаюсь создать, занимая всю высоту страницы. Слева
Я пытаюсь создать два столбца <div> , p во всю высоту страницы. Слева я пытаюсь создать два столбца <div> , оба <div> занимают всю высоту страницы. LeftI я пытаюсь создать два…
Как растянуть блок на весь экран CSS
Заметил, что в интернете встречается довольно часто вопрос о том, как растянуть блок по высоте экрана. То есть чтобы он полностью заполнил все пространство вне зависимости от высоты самого монитора. Задачка, можно сказать, простенькая, но так как есть своя «хитрость», она окажется проблематичной, особенно, для начинающих.
И по такому случаю давайте реализуем блок на весь экран средствами CSS. Кстати, если хотите сделать по экранную прокрутку, то я делал обзор на JS-плагины экранной прокрутки (скроллинг). Вернемся к нашей задачи. Итак, вот один из примеров, как это можно сделать.
Берем DIV
или можно section
, и присваиваем ему высоту, использовав единицу измерения vh
– это относительно 1% высоты окна просмотра. Пример:
<!DOCTYPE html> <html> <head> <title>Блок на всю высоту страницы</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <style> *{ padding:0; margin:0; } section { height: 100vh; width: 100%; background:#E11328; } </style> <section> </section> </body> </html>
Посмотреть
Вот мы и получили нужный результат. Ну а дальше уже можно подгонять под себя. К примеру, сделать два блока с обтеканием.
<!DOCTYPE html> <html> <head> <title>Блок на всю высоту страницы</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <style> *{ padding:0; margin:0; } .divleft { height: 100vh; width: 50%; background: #E1DD5B; float: left; } .divright { height: 100vh; width: 50%; background: #E13345; float: right; } </style> <div></div> <div></div> </body> </html>
Посмотреть
Есть также и другие варианты реализации. Это может быть flex
, JavaScript
и другое. Но этот рабочий и кроссбраузерный. Ну, если, конечно, браузер не очень старый. В Internet Explorer 8 этот способ не работает, а начиная с 9 все отлично.
Как растянуть блок на всю высоту. Прижимаем футер к низу страницы
Сегодня поговорим о двух распространенных проблемах, с которыми сталкиваются верстальщики при верстке макетов сайтов. Одной из проблем является задача прижатия футера к низу экрана. Суть задачи состоит в том, чтобы при различных разрешениях монитора футер был прижат к низу окна браузера
в случае, когда средняя (контентная) часть сайта содержит небольшой объем контента.
Второй актуальной задачей является необходимость растянуть некий внутренний блок на всю высоту контейнера body
. Как правило, это требуется для того, чтобы фоновый этого блока рисунок был на всю высоту страницы от верха страницу до футера.
Прижимать, и растягивать будем средствами CSS , можно сюда привлечь java script, но зачем, если это можно сделать проще и элегантнее. Решение подобных проблем за счет ява кода имеет один очевидный недостаток, ява скрипт можно отключить в браузере и верстка поплывет.
Подобные задачи я уже решал раньше, но каждый раз приходилось по новой искать информацию как прижать футер и растянуть блок div, потому, что не понимал сути.
Прижимаем футер к низу страницы.
Исходно имеем некую html страницу представленную кодом:
основной текст сайта
контейнер body имеет серый цвет, внутри него лежит обертка (#wrapper) шириной 200 пикселов, равнение по центру. Внутри обертки последовательно сверху вниз расположены три блока: #header — шапка, розового цвета; #content — содержательная часть сайта с фоном белого цвета; #footer — подвал черного цвета. Высота шапки и подвала принята 50 пикселов. Высота контентной части варьируется по содержимому. Визуально это выглядит следующим образом.
Для начала нужно вынести блок футера за пределы обертки (#wrapper). Затем для контейнеров html, body, #wrapper установить высоту 100% (height: 100%). После этого появится полоса прокрутки, а футер будет расположен ниже видимой части окна браузера.
Чтобы уйти от этого недоразумения, установим для футера отрицательный межблочный отступ по вертикали равный высоте футера (margin:-50px auto; — смещаем вверх на 50 пикс. и выравниваем по центру). Теперь у нас футер наползает на блок обертки и на блок контента в случае если высота соответствует. Сделаем для блока контента внутриблочный отступ снизу 50px, теперь все выглядит красиво.
Пока этот вариант работает в «правильных» браузерах (я проверял в opera, firefox, google chrome и IE 8). В недобраузере ИЕ 6 не проверял работоспособность, в ИЕ 7 по идее должно работать.
основной текст сайта
Как растянуть блок div по высоте родительского блока
Собственно мы уже это сделали, блок #wrapper растянут по высоте на 100% контейнера body. Проблема заключается немного в другом, на рисунке ниже видно, что белый фон контента не дотягивается до футера, а между контентом и футером появился серый фон. Чтобы этого избежать можно задать для обертки такой же цвет как и для блока контента (#wrapper{ background:#fff;}).
UPD: 3.04.2014
Образовался некий, якобы пробел в подаче информации. Попытаюсь заполнить. Суть в том, что в комментах есть замечания на тему что контент не растянут как обещалось. Во-первых в статье нет речи о том, что нужно ратягивать блок контента. Во-вторых в статье блок wrapper растянут на высоту блока body, о чем сказанно в заголовке (как растянуть блок по высоте), что и требовалось доказать. Решать некую универсальную задачу я перед собой не ставил, это в принципе не возможно.
Но чтобы показать вам, что все проблемы решаются покажу как «растянуть» еще и блок контента. Сразу оговорюсь, напрямую в блочной модели невозможно без javaScript расятнуть один блок до другого блока, сделать это можно только на 100% высоту. Без яваскрипта вопрос решается таблицей. Делаете 3 ячейки по вертикали (шапка, контент, подвал). Если ограничить высоту шапки и подвала, а высоту таблицы сделать 100%, то в итоге контентная часть будет просчитываться браузером автоматически.
Я же покажу как закрасить фон блока контента в белый цвет не трогая блок wrapper. Все очень просто, создаем еще один блок вложенный в блок wrapper, назовем его, например wrapper2. Укажем ему высоту 100% и белый фон. Что итребовалось доказать
основной текст сайта
До новых встреч. На закуску как всегда сочное видео на тему экстрим-сплава. Рафтинг на реке Замбези, порог с говорящим названием — «унитаз дьявола».
Ширина и высота экрана на CSS
Растянуть блок на всю ширину и высоту окна браузера можно с помощью:
- . Пример: .
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
} - div {
width: 100vw;
height: 100vh;
} - начальной width и height тега html . По умолчанию height любого тега, в том числе html и body , равна его содержимому. Для того, чтобы элемент имел min-height: 100%; , должна быть указана height его родителя.
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as «0» (for «min-height») or «none» (for «max-height»). [w3.org ]
С width проще, поскольку width блочного элемента равно width его родителя. У body только нужно обнулить margin и padding .
Блок шириной на весь экран монитора выровнять по центру окна браузера
У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и .
Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:
Картинка на весь экран CSS
Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.
Код немного доработан, опираясь на статью . Там же написан соответствующий вариант для видео.
Я всегда сталкиваюсь с затруднениями, когда необходимо растянуть блок на 100% высоты страницы
. Например, у меня есть блок div , который необходимо растянуть, однако все немного сложнее, чем кажется. Итак, почему бы не найти кроссбраузерное решение по растягиванию блока на всю высоту страницы?
Сегодня мы попытаемся найти это решение.
Скажем, у вас есть html-файл наподобие такого:
CSS 100% Height
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod …..
короче много контента
К нему прилагается CSS:
Body {
margin: 0;
padding: 0;
}
#content {
background: #EEE;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
height: 100%;
}
Что это нам дает, вы можете увидеть перейдя по:
Как вы можете видеть, высота страницы определяется контентом и не растягивается на 100%, несмотря на то, что мы добавили блоку #content свойство height со значением 100% . Как так? Давайте немного поразмышляем об HTML. HTML – это всего лишь куча контейнеров вложенных один в другой. Итак, у нашей страницы сперва идет контейнер html , затем внутри контейнера html лежит контейнер body , ну и, наконец, в body расположен блок с идентификатором content . Когда мы помещаем контент в один из этих блоков, он растягивает этот блок и все другие блоки, содержащие этот блок. Итак, мы растягиваем блок
, когда помещаем в него текст, этим, в свою очередь, мы растягиваем другие блоки (в нашем случае это блоки body и html).
Добавляя блоку
объявление height: 100% , мы говорим: блок div id=«content» нужно растянуть на всю высоту блока-родителя. В нашем примере, как вы понимаете, этим блоком-родителем является тег body . Итак, высота блока div id=«content» равна полной высоте (100%) тега body . Хорошо, но какая высота у тега body ? Все просто: высота тега body равна высоте блока , которую мы нигде не задавали! Поэтому, когда мы создаем объявление height: 100% , мы просто говорим: блок по высоте должен быть равен самому себе!
Чтобы исправить это, нам нужно назначить тегу body свою высоту. Но мы снова столкнемся с той же проблемой, ведь тег body лежит в теге html . Таким образом, чтобы растянуть блок
на всю высоту окна браузера, нам необходимо тегам body и html задать высоту, которая соответствовала бы полной высоте страницы.
Html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#content {
background: #EEE;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
min-height: 100%;
}
/* специально для IE */
* html #content {
height: 100%;
}
И на этом все. Посмотрите demo. Блок с контентом растягивается на всю высоту окна браузера
.
Обратите внимание на объявление min-height:100%; : благодаря нему в случае, если контент выходит за пределы окна браузера, фон также будет растягиваться за контентом.
Не забываем и о старых браузерах IE, которые не понимают свойство min-heigt , для них необходимо добавить * html #content {height: 100%;} .
Использованы материалы
Блок на весь экран | CSS — Примеры
Ширина и высота экрана на CSS
Растянуть блок на всю ширину и высоту окна браузера можно с помощью:
position: fixed;
. Пример: онлайн линейка.div { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
- единиц
vw
иvh
div { width: 100vw; height: 100vh; }
- начальной
width
иheight
тегаhtml
. По умолчаниюheight
любого тега, в том числеhtml
иbody
, равна его содержимому. Для того, чтобы элемент имелmin-height: 100%;
, должна быть указанаheight
его родителя.If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]
<html> <head> <style> html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } body { overflow: auto; } main { min-height: 100%; } </style> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> <html>
С width
проще, поскольку width
блочного элемента равно width
его родителя. У body
только нужно обнулить margin
и padding
.
Блок шириной на весь экран монитора выровнять по центру окна браузера
У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.
<html> <head> <style> header, nav, main, footer { max-width: 1200px; margin: 0px auto; } </style> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> <html>
Для того, чтобы контент выходил за пределы этих 1200px
, но был ограничен шириной окна браузера, достаточно такого кода:
<html> <head> <style> header, nav, main, footer { max-width: 1200px; margin: 0px auto; } @media (min-width: 1200px) { .full-screen { width: 50vw; margin-left: 50%; } .full-screen > div { width: 100vw; margin-left: -100%; } } </style> </head> <body> <header></header> <nav></nav> <main> <article> <div> <div> </div> </div> </article> </main> <footer></footer> </body> <html>
Картинка на весь экран CSS
Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.
Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.
<html> <head> <style> header, nav, main, footer { max-width: 1200px; margin: 0px auto; } @media (min-width: 1200px) { .full-screen { width: 50vw; margin-left: 50%; } .full-screen > div { width: 100vw; margin-left: -100%; } .full-screen img { display: block; max-width: 100%; height: auto; margin: 0 auto; } } </style> </head> <body> <header></header> <nav></nav> <main> <article> <div> <div> <img src="адрес" alt="текст" /> </div> </div> </article> </main> <footer></footer> </body> <html>
И не нужны никакие лайтбокс для фото.
Другое решение: https://css-tricks.com/full-width-containers-limited-width-parents/
html — Как растянуть div на всю высоту с помощью flex
html — Как растянуть div на всю высоту с помощью flex — qaru
Спросил
Просмотрено
418 раз
Как растянуть блоки div с желтым фоном на всю высоту? Он должен закрывать зеленый цвет, но он не работает.Я пробовал добавить на него высоту : 100%
, но затем складывается высота из строки поиска?
https://jsfiddle.net/nuy20j1h/
.block {
ширина: 80%;
маржа: 0 авто;
дисплей: гибкий;
flex-wrap: обертка;
}
.sidebar {
высота: 600 пикселей;
ширина: 25%;
фон: красный;
}
.дом {
дисплей: гибкий;
flex-wrap: обертка;
выровнять элементы: гибкий старт;
ширина: 75%;
фон: зеленый;
}
.панель поиска {
ширина: 100%;
отступ: 25 пикселей;
фон: синий;
}
.content-wrap {
дисплей: гибкий;
flex-wrap: обертка;
ширина: 100%;
выровнять элементы: гибкость-растяжка;
}
.содержание,
.Один {
ширина: 50%;
фон: желтый;
}
боковая панель
панель поиска
lorem ipsum
тест
Сын
79.8k1111 золотых знаков8282 серебряных знака130130 бронзовых знаков
Создан 30 янв.
два
77244 золотых знака1212 серебряных знаков2626 бронзовых знаков
7
Сначала вы должны добавить сброс стиля, сейчас я использую это * {}
, как вы можете видеть ниже.Уловка здесь заключается в том, чтобы запустить flex-direction: column;
на .home
, и вы можете указать .content-wrap
занять оставшееся пространство после поиска с помощью flex-grow: 1;
размер коробки: бордюр-бокс;
есть, если вы добавите, скажем, width: 200px;
к элементу и добавьте padding: 20px;
, элемент останется на 200 пикселей с включенным отступом. Если у вас его нет, он займет 200 + 40 пикселей.
, если вам нужна скрипка, вот она
* {
отступ: 0;
маржа: 0;
размер коробки: рамка-рамка;
}
.блокировать {
ширина: 80%;
маржа: 0 авто;
дисплей: гибкий;
flex-wrap: обертка;
}
.sidebar {
высота: 600 пикселей;
ширина: 25%;
фон: красный;
}
.дом {
дисплей: гибкий;
flex-direction: столбец;
flex-wrap: обертка;
выровнять элементы: гибкий старт;
ширина: 75%;
фон: зеленый;
}
.панель поиска {
ширина: 100%;
отступ: 25 пикселей;
фон: синий;
}
.content-wrap {
дисплей: гибкий;
flex-grow: 1;
flex-wrap: обертка;
ширина: 100%;
выровнять элементы: гибкость-растяжка;
}
.содержание,
.Один {
ширина: 50%;
фон: желтый;
}
боковая панель
панель поиска
lorem ipsum
тест
Создан 30 янв.
Деян.SDejan.S
16.6k2121 золотой знак6666 серебряных знаков106106 бронзовых знаков
1
flex-direction: столбец;
— ваш друг. Вот переработанная скрипка вашего кода: https://jsfiddle.net/vsjktmms/1/
Используя ту же структуру HTML, которую вы предоставили:
.блокировать {
дисплей: гибкий;
ширина: 80%;
маржа: 0 авто;
цвет фона: серый;
align-items: stretch;
}
.sidebar {
ширина: 25%;
высота: 600 пикселей;
цвет фона: красный;
}
.дом {
дисплей: гибкий;
flex-direction: столбец;
align-items: stretch;
ширина: 75%;
цвет фона: зеленый;
}
.панель поиска {
отступ: 25 пикселей;
цвет фона: синий;
}
.content-wrap {
гибкость: 1 1 авто;
дисплей: гибкий;
flex-wrap: обертка;
ширина: 100%;
цвет фона: розовый;
}
.содержание,
.Один {
ширина: 50%;
фон: желтый;
}
Создан 30 янв.
Крискиркнильсен
2,63022 золотых знака1010 серебряных знаков2121 бронзовый знак
Как упоминалось в других ответах, здесь есть одна основная проблема:
-
flex-direction: столбец;
, который я добавил кhome
, чтобы разрешить использование свойств гибкости вместоheight
, чтобы сделать.content-wrap
заполнить доступное пространство, оставшееся в доме
Это сделает стек .search-bar
и .content-wrap
вертикальным и позволит использовать flex: 1
на .content-wrap
, что позволит заполнить оставшееся пространство / высоту .
Итак, даже если вы уже получили ответы, и поскольку некоторые свойства имеют неправильное значение или не нужны, я решил опубликовать ответ, чтобы прояснить внесенные изменения.
См. Мои примечания, сделанные в CSS, для дальнейших разъяснений и того, что я изменил.
Фрагмент стека
.block {
ширина: 80%;
маржа: 0 авто;
дисплей: гибкий;
flex-wrap: обертка;
}
.sidebar {
высота: 600 пикселей;
ширина: 25%;
фон: красный;
}
.дом {
дисплей: гибкий;
flex-direction: столбец; /* добавлен */
/ * flex-wrap: wrap; удалено, не нужно * /
/ * align-items: flex-start; удалены, элементы должны заполнять родительские,
в этом измененном случае ширина * /
ширина: 75%;
фон: зеленый;
}
.панель поиска {
/ * ширина: 100%; не требуется, по умолчанию для столбца
элемент должен заполнить родительскую ширину как
его "align-items" равно "stretch" * /
отступ: 25 пикселей;
фон: синий;
}
.content-wrap {
гибкость: 1; / * добавлено, забираем оставшееся место слева
слева от своего родителя (в данном случае высота) * /
дисплей: гибкий;
flex-wrap: обертка;
/ * ширина: 100%; не требуется, по умолчанию для столбца
элемент должен заполнить родительскую ширину как
его "align-items" равно "stretch" * /
/ * align-items: flex-stretch; неправильное значение, должно быть "растягивать",
хотя, поскольку это значение по умолчанию,
это не нужно * /
}
.содержание,
.Один {
ширина: 50%;
фон: желтый;
}
боковая панель
панель поиска
lorem ipsum
тест
Создан 30 янв.
Асон
79.8k1111 золотых знаков8282 серебряных знака130130 бронзовых знаков
0
Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html css flexbox или задайте свой вопрос.
lang-html
Stack Overflow лучше всего работает с включенным JavaScript
Ваша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie
Настроить параметры
CSS Сделайте полноэкранный формат Div
58 796
Есть несколько способов заставить div занимать весь экран по горизонтали и вертикали.
У меня есть простой элемент div с полем имени класса.
Затем удалите все поля или отступы по умолчанию из тегов html и body.
html, body {
маржа: 0px;
}
высота: 100%
Перед тем, как установить для свойства height значение 100% внутри класса .box, обязательно добавьте его в теги HTML и body, иначе это не сработает.
Это связано с тем, что когда вы устанавливаете высоту 100% для элемента, он будет пытаться растянуться до высоты своего родительского элемента.
html, body {
маржа: 0px;
высота: 100%;
}
.коробка {
фон: красный;
высота: 100%;
}
✅ Рекомендуется:
CSS Сделать фоновое изображение на весь экран
высота: 100vh
Класс .box имеет только 100vh, что составляет 100% высоты области просмотра.
Когда вы устанавливаете высоту на 100vh, элемент коробки будет растягивать свою высоту до полной высоты окна просмотра независимо от его родительской высоты.
Мне не нужно добавлять по горизонтали, поскольку div — это элемент блочного уровня, который по умолчанию принимает всю ширину по горизонтали.
.box {
фон: красный;
высота: 100vh;
}
✅ Рекомендуется :
CSS Center A Div по горизонтали и вертикали
позиция: абсолютная
Вы также можете использовать абсолютное положение, а также установить для всех сторон окна просмотра (верх, правый, нижний, левый) значение 0 пикселей, чтобы div занимал весь экран.
.box {
фон: красный;
позиция: абсолютная;
верх: 0px;
вправо: 0 пикселей;
внизу: 0px;
слева: 0px;
}
Вы также можете установить высоту и ширину на 100% вместо установки 0 сверху, справа, снизу и слева.
Один из сценариев, которые я могу придумать для использования свойства position: absolute для создания полноэкранного div, — это когда вы хотите иметь фоновый полноэкранный div для браузера и какой-либо другой div на переднем плане.
✅ Рекомендуется
Дизайн классной регистрационной формы с использованием HTML и CSS
ящиков, которые заполняются по высоте (или более) (и не сжимаются)
Трудно описать все достоинства flexbox в одном небольшом сообщении в блоге.Хотя здесь мы попробовали. Здесь давайте просто попробуем сосредоточиться на одной вещи, которую Flexbox решает очень хорошо: возможность иметь произвольный набор блоков, заполняющих всю доступную высоту родительского блока. И не только это, но и при необходимости расширяйте их (не сжимайте их до нужного размера).
Под «коробкой» я подразумеваю элемент блочного уровня. Див, раздел, статья, что угодно.
По умолчанию высота этих ящиков определяется содержимым внутри них. Они будут складываться друг на друга. Высота их родительских ящиков также может определяться их общей высотой, но она может быть другой (например,грамм. он установлен явно или представляет собой что-то переменное, например окно браузера). Если родительский блок имеет большую высоту, внизу останется пустое место.
Не можем ли мы заставить коробки равномерно разделить пространство между этим пространством? Мы можем это сделать с помощью flexbox.
Слева: по умолчанию; Справа: что мы хотим сделать
Скажем, HTML выглядит так:
<раздел>
Затем мы запускаем flexbox с родительским блоком:
.fill-height-or-more {
дисплей: гибкий;
}
и сделайте поля вверх-вниз (столбец), а не вправо-влево (строка), как это по умолчанию:
.fill-height-or-more {
дисплей: гибкий;
flex-direction: столбец;
}
Если бы мы ничего не сделали, он не будет выглядеть иначе. Но теперь мы применяем свойство flex к дочерним элементам, и они заполняют пространство:
.fill-height-or-more> div {
/ * это гибкие элементы * /
гибкость: 1;
}
Аннннд готово =).
Подробно: flex: 1;
— это то же самое, что сказать flex: 1 1 auto;
Сокращение для трех различных свойств:
гибкий рост: 1;
флекс-термоусадочная: 1;
флекс-основа: авто;
Так уж получилось, что дать им возможность расти на равной основе — самая распространенная потребность, так что flex: 1;
— хороший способ написать это.
Одна из приятных особенностей flexbox — это то, что он работает с произвольным количеством ящиков.Может быть одна коробка! Может быть 100 коробок! Неважно. Если есть лишняя комната, пространство будет разделено и заполнено. Если нет, ничего страшного.
В мире pre-flexbox мы могли бы попытаться узнать / выяснить, сколько ящиков было, а затем установить их высоту в процентах. Это работает, чтобы заполнить дополнительное пространство, но если бы ящиков было слишком много, вы бы раздавились. Еще одна приятная особенность флексбокса: он не сжимает эти блоки до такой степени, что они не могут уместить их содержимое.Итак…
Слева: если бы мы использовали проценты; Справа: нормальное желаемое поведение
Если бы мы хотели сделать еще один шаг, мы могли бы использовать flexbox для центрирования содержимого в этих полях (!). Но именно здесь люди злятся на CSS. Вертикальное центрирование довольно сложно. Даже с использованием здесь flexbox нам нужно будет превратить каждый из этих дочерних элементов гибкости в гибкие контейнеры. Затем используйте внутреннюю оболочку, которая становится гибким элементом, который мы центрируем. Так что да, еще есть дополнительный элемент. Обновление : Tedmotu сделал это без лишнего элемента, что очень просто
Чтобы центрировать его, мы снова задаем направление вверх и вниз (столбец) и используем другое свойство flexbox, justify-content
, чтобы центрировать его.
.fill-height-or-more> div {
гибкость: 1;
дисплей: гибкий;
justify-content: center;
flex-direction: столбец;
}
Вот здесь и пригодится справочное руководство… быстро выяснить, какое свойство что делает.
Тогда получаем:
См. Коробки с ручками, которые заполняют высоту (или больше) от Криса Койера (@chriscoyier) на CodePen.
Поддержка браузера
В этом посте я использовал только последний синтаксис.Текущие версии Chrome, Opera поддерживают это именно так. Ближайшие будущие версии Firefox и Android будут поддерживать его точно так же. Safari и iOS поддерживают новый синтаксис, только с префиксом -webkit-. У Can I Use есть вся история.
IE странный. IE 10 поддерживает твинер-версию flexbox (например, display: -ms-flexbox;). IE 11 поддерживает последнюю версию Flexbox. Однако в этой конкретной демонстрации что-то сломано. В то время как высота .fill-height-or-more отображается на полную высоту с использованием min-height
, поля сжимаются.
Если вы используете высоту вместо гибкого контейнера, это «работает», но здесь использовалась минимальная высота, чтобы избежать сжатия. Мне кажется, что это ошибка реализации.
ОБНОВЛЕНИЕ: Нирав Завери написал мне, что в IE (я тестировал v11) flex: 1
не то же самое, что flex: 1 1 auto
, хотя он должен быть (?). Если установить более позднее, все работает.
Понятно, что вам, возможно, придется немного вернуться назад с поддержкой браузера.Firefox 27, iOS 6 и Safari 6 являются вполне законными целями поддержки браузеров, и все они используют некоторые вариации старого синтаксиса, иногда с префиксом, а иногда без него.
Просто наш маленький пример выглядит так, когда он настолько детализирован, насколько это возможно для поддержки:
.fill-height-or-more {
дисплей: -webkit-box;
дисплей: -webkit-flex;
дисплей: -moz-box;
дисплей: -ms-flexbox;
дисплей: гибкий;
-webkit-box-orient: вертикальный;
-webkit-box-direction: нормальный;
-webkit-flex-direction: столбец;
-moz-box-orient: вертикальный;
-moz-box-direction: нормальный;
-ms-flex-direction: столбец;
flex-direction: столбец;
}
.fill-height-or-more> div {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
гибкость: 1;
дисплей: -webkit-box;
дисплей: -webkit-flex;
дисплей: -moz-box;
дисплей: -ms-flexbox;
дисплей: гибкий;
-webkit-box-pack: по центру;
-webkit-justify-content: center;
-moz-box-pack: по центру;
-ms-flex-pack: по центру;
justify-content: center;
-webkit-box-orient: вертикальный;
-webkit-box-direction: нормальный;
-webkit-flex-direction: столбец;
-moz-box-orient: вертикальный;
-moz-box-direction: нормальный;
-ms-flex-direction: столбец;
flex-direction: столбец;
}
Ага.Моя рекомендация? Напишите его в современном синтаксисе, подобном приведенному выше, и позвольте Autoprefixer справиться с этим, который имеет дело не только с префиксом, но и со старым синтаксисом.
Скринкаст видео
Может, привет? Я опубликовал его здесь и тоже вставлю:
Да, и просто для записи, реальным сценарием, который вызвал это для меня, была эта страница.
Как с помощью CSS сделать дочерние элементы flexbox на 100% высотой по сравнению с их родителями?
CSS Flexbox — отличный инструмент для создания макетов веб-сайтов.Сделать дочерний элемент flex-box на 100% высотой его родительского элемента можно двумя способами. Это немного сложно, потому что, безусловно, будет отображаться ошибка.
Например, дочерний элемент может выходить за пределы родительской границы или может не достигать 100% высоты, которую вы увидите в выводе вашего браузера.
Пример 1: В этом примере с помощью CSS создается дочерний гибкий блок высотой 100%.
html
05 05 09 "child-child 009 div 9 0002 |
Выход:
Пример второй: 2 с помощью свойства align-items в родительском div для 'stretch'.Это делает высоту каждого .child-div 100% высоты его родительского элемента.
html
05 05 09 "child-child 009 div 9 0002 |
Выход:
Ширина 9017 ребенок на 100% от родителя.
html
05 05 09 "child-child 009 div 9 0002 |
Выход:
Поддерживается Google Chrome 900 .0 HTML является основой веб-страниц, используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений. Вы можете изучить HTML с нуля, следуя инструкциям это руководство по HTML и примеры HTML. CSS - это основа веб-страниц, используется для разработки веб-страниц путем стилизации веб-сайтов и веб-приложений. Вы можете изучить CSS с нуля, следуя этому руководству по CSS и примерам CSS. Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с Web Design for Beginners | HTML курс. Существует несколько современных методов, а также более старый метод, который можно использовать для растягивания любого элемента, чтобы он соответствовал его родительскому (или окну браузера) ) 100% по вертикали (то есть 100% высоты). Для наших целей предположим, что у нас есть единственный элемент Во-первых, мы можем использовать старую технику, которая работает в старых браузерах: Обратите внимание, что одним из ключей к описанной выше технике является обеспечение того, чтобы Важно помнить, что, хотя Вместо процентных единиц вы можете использовать хорошо поддерживаемую единицу измерения Опять же, это зависит от внутренних элементов и, возможно, В некоторых случаях лучшим решением может быть использование flexbox, например: Как видите, Или начните обсуждение в нашей группе Facebook для профессионалов WordPress.Найдите ответы, поделитесь советами и получите помощь от других экспертов WordPress. Присоединяйтесь сейчас (это бесплатно)! Первоначально задумывавшийся как простой инструмент для группировки элементов страницы, тег DIV дает дизайнерам дополнительную гибкость и контроль над макетом в сочетании со свойствами каскадной таблицы стилей (CSS). Дизайнеры используют DIV для создания сложных макетов страниц без использования таблиц.К сожалению, по мере того, как макеты становятся более сложными, проблемы совместимости браузеров возрастают. Проблемы совместимости с ВЫСОТОЙ И ШИРИНОЙ Рассмотрим одну из самых простых схем: две колонки, расположенные рядом. Один содержит меню навигации, а другой - содержимое страницы. Это кажется идеальным кандидатом для перехода от макета на основе таблицы к макету CSS. Это имеет смысл: как DIV, так и таблицы могут быть вложенными, иметь атрибуты HEIGHT и WIDTH, содержать границы и т. Д.Однако есть одна большая разница в поведении. Если вы поймете эту проблему, вы сэкономите много времени на отладку. Запишите это: Ячейки таблицы растягиваются, чтобы соответствовать размещенному в них содержимому, но DIV не могут! Как и многие другие раздражающие проблемы дизайна, основная проблема заключается не в самих правилах CSS, а в том, как браузеры их интерпретируют. Браузеры Mozilla, Netscape и Opera интерпретируют эти значения как точные измерения и не позволяют значениям DIV HEIGHT или WIDTH выходить за рамки того, что вы указали.Поэтому, если вы установите свойства HEIGHT и WIDTH для DIV, а затем вставите изображения или текст, которые занимают больше места, на дисплее будет беспорядок. Internet Explorer гораздо снисходительнее. Он считает значения HEIGHT и WIDTH минимальными значениями и расширяет DIV, чтобы он содержал все необходимое содержимое - точно так же, как ячейка таблицы. Кто прав? Что ж, Explorer не следует стандартам CSS, выпущенным Консорциумом World Wide Web (W3C), в то время как другие браузеры.Может показаться, что Explorer оказывает вам услугу, но примите во внимание результат, если вы используете абсолютное позиционирование для размещения всех элементов страницы. Если один DIV отображается больше, чем вы ожидаете, другой важный контент может быть скрыт от просмотра! Сравните дисплеи Explorer и Netscape Посмотрите на HTML-код ниже. Обратите особое внимание на значения HEIGHT и WIDTH в классах и на изображениях внутри раздела HEAD: Внутри секции BODY: материал про счастливого щенка материал про счастливого щенка материал про счастливого щенка материал про счастливого щенка Обратите внимание, что правило CSS устанавливает ШИРИНУ DIV навигации равной 125 пикселей, но мы поместили изображение внутри самого DIV шириной 163 пикселей.Также обратите внимание на значения HEIGHT на двух DIV. Для обоих установлено 75% окна браузера, но для навигационного DIV может потребоваться больше места. Вот как это отображается в Explorer 6.0. Навигационный DIV расширяется вправо и содержит все изображение логотипа Happy Puppy и элементы меню. Обратите внимание на то, что меню DIV выше, чем содержимое DIV. В Netscape 7.1 отображается весь логотип Happy Puppy, но ширина навигационного DIV не растягивается, чтобы вместить его. Вот почему большая часть текста DIV содержимого перезаписывает изображение логотипа.Высота обоих DIV фиксирована на 75%, поэтому дополнительный контент просто уходит из обоих в пустое пространство ниже. Ни одна из страниц не выглядит так хорошо, но версия Explorer, по крайней мере, удобочитаема. Вложенное решение DIV для Explorer Хотя версия Explorer выглядит лучше, она все еще не идеальна. К счастью, это легко исправить, хотя это решение предназначено только для проводника! Поместите оба DIV в контейнер DIV, который установлен на 100% высоты страницы, и установите оба внутренних DIVS на 100%.Они заполнят контейнер DIV, и высота обоих будет одинаковой. Измените свойство HEIGHT обоих DIV на 100% и добавьте этот класс стиля в свои правила CSS: .container {height: 100%} , а затем примените его к контейнеру DIV в разделе BODY: ... содержание навигации DIV ... ... содержание содержимого DIV ... Вот результат в проводнике: Отображение в Netscape при этом не меняется, но версия Explorer близка к ожидаемой.Если вы уверены, что все (или, по крайней мере, подавляющее большинство) ваших посетителей используют Explorer, это решит вашу проблему. Это отличное решение для макетов без таблиц. Свойство переполнения Если вам нужно более кроссбраузерное решение, возможно, вам подойдет свойство OVERFLOW. Стандарт W3C описывает ситуацию так: «Обычно содержимое блока блока ограничено краями содержимого блока. В некоторых случаях блок может переполняться, что означает, что его содержимое частично или полностью находится за пределами блока... " Свойство OVERFLOW может иметь одно из четырех различных значений: Добавление свойства OVERFLOW к обоим DIV сохраняет содержимое внутри DIV, но также создает ощущение «фрейма», которое может не понравиться ни дизайнерам, ни посетителям. Когда мы добавляем правило CSS «overflow: scroll» в контейнер DIV, мы получаем это отображение в Netscape 7.1 и Explorer: Обратите внимание на полосу прокрутки с правой стороны. Содержимое раздела контейнера будет прокручиваться, а навигация останется неизменной. Это действительно создает ощущение "обрамления", но может помочь ориентировать посетителей, если у вас очень длинные страницы. Эта карта существовала раньше, но устарела из-за изменений в реализации браузера.Приведенная ниже информация подтверждена для текущего списка поддерживаемых нами браузеров. По умолчанию ваши элементы Вы можете быть удивлены этим , поскольку установка Чтобы сделать ситуацию еще более запутанной, старые браузеры, такие как IE9, на самом деле действительно делают В любом случае, это означает, что если вы привязываете элемент абсолютно к низу страницы, он будет , а не , фактически будет располагаться внизу страницы, если контент уже, чем высота окна просмотра браузера: Копия Чтобы сделать страницу по крайней мере такой же высокой, как и область просмотра браузера (а затем увеличивать ее, если содержимое превышает высоту области просмотра), задайте для вашего Копия Это выровняет Обратите внимание, что ваше тело Копия Это работает в Internet Explorer 9+ (я тестировал). Обратите внимание, что любое поле Защитите свое приложение Rails от нарушений безопасности Получает ли ваша версия Ruby on Rails обновления безопасности? . Сделайте Div 100% высоты окна браузера (или родительского)
. Старая техника (для старых браузеров)
* {
размер коробки: рамка-рамка;
}
html, body {
высота: 100%;
}
.рост {
фон: светло-голубой;
минимальная высота: 100%;
}
box-sizing: border-box;
применяется, чтобы дочерний элемент не выходил за пределы родительского.Кроме того, это могут нарушить некоторые настройки отступов и полей. Вот демонстрация:
и
будут естественным образом соответствовать окну браузера, дочерний элемент будет составлять 100% высоты
, даже если это означает, что он переполняется (например, в зависимости от наличия других элементов или полей / отступов). Современная техника с использованием агрегатов VH
vh
, чтобы получить тот же эффект, но с немного меньшим количеством кода, предполагая, что элемент является прямым потомком
:
* {
размер коробки: рамка-рамка;
}
.рост {
фон: светло-голубой;
минимальная высота: 100%;
}
box-sizing: border-box;
, без необходимости в 100% высоте родительского элемента. Но обратите внимание, что это будет работать только в том случае, если элемент является прямым потомком
, потому что единица vh
представляет 1/100 высоты браузера (области просмотра). Современная техника с использованием Flexbox
html, body {
высота: 100%;
}
тело {
дисплей: гибкий;
}
.рост {
фон: светло-голубой;
flex-grow: 1;
}
box-sizing: border-box;
не требуется. Свойство flex-grow
заставляет дочерний элемент увеличиваться в соответствии с высотой его родительского элемента без нарушения макета. Вы также должны иметь в виду, что это делает все дочерние элементы гибких элементов
, поэтому вам придется взвесить все за и против использования этого решения. CSS- Div- Будьте осторожны при выборе размера Div
Заголовок раздела
Заголовок раздела
Заголовок раздела
Заголовок раздела
Растяжение HTML-страницы до полной высоты
html
и body
имеют высоту только столько, сколько фактическое содержимое страницы . Если у вас есть только две строки текста на вашей странице, ваши элементы html
и body
будут иметь высоту около 40 пикселей, независимо от размера окна вашего браузера. фона
на html
и body
закрывает всего окна просмотра браузера.Так что же происходит? Ну, поскольку вы не можете выбрать область просмотра браузера с помощью CSS, браузеры возьмут некоторые свойства, такие как background-color
и overflow-y
из body
и html
, и применит их к безымянному окну просмотра. Извини за это. html
на всю высоту области просмотра браузера.
.bottom-box {
цвет фона: красный;
позиция: абсолютная;
слева: 0;
внизу: 0; // это нижняя часть содержимого, а не нижняя часть области просмотра
ширина: 200 пикселей;
высота: 20 пикселей;
}
html
как min-height
из 100%
:
html {
минимальная высота: 100%;
}
.поле
выше с нижней частью области просмотра, как ожидалось, или с нижней частью содержимого, если она длиннее, чем высота области просмотра.
будет по-прежнему будет только таким же высоким, как ваше содержимое. Если вам абсолютно необходимо, чтобы ваше тело было как минимум на уровне окна просмотра браузера, вы можете задать для него минимальную высоту
, равную 100vh
. Это означает 100% высоты окна просмотра:
body {
мин-высота: 100vh;
}
в теле
добавляется к 100%, потому что CSS. Дополнительная литература
Rails LTS предоставляет исправления безопасности для старых версий Ruby on Rails (3.2 и 2.3).