CSS: авто высота блока div, 100% высоты на фоне div внутри блока div
В 2018 году многие браузеры поддерживают Flexbox и Grid , которые являются очень мощными режимами отображения CSS, которые затмевают классические методы, такие как искусственные столбцы или табличные дисплеи (которые рассматриваются позже в этом ответе).
Чтобы реализовать это с помощью сетки, достаточно указать display: grid и grid-template-columns на контейнере. grid-template-columns зависит от количества столбцов у вас есть, в этом примере я буду использовать 3 столбца, следовательно , свойство будет выглядеть: grid-template-columns: auto auto auto , что в основном означает, что каждый из столбцов будет иметь автоматическую ширину.
Полный рабочий пример с сеткой:
html, body { padding: 0; margin: 0; } .grid-container { display: grid; grid-template-columns: auto auto auto; width: 100%; } .grid-item { padding: 20px; } .a { background-color: DarkTurquoise; } .b { background-color: LightSalmon; } .c { background-color: LightSteelBlue; }
<!DOCTYPE html> <html> <head> <title>Three Columns with Grid</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p> </div> </div> </body> </html>
Другим способом было бы использовать Flexbox, указав display: flex в контейнере столбцов и придав столбцам соответствующую ширину. В Примере, который я буду использовать, то есть с 3 столбцами, вам в основном нужно разделить 100% на 3, так что это 33.3333% (достаточно близко, кто заботится о 0.00003333… который все равно не виден).
Полный рабочий пример с использованием Flexbox:
html, body {
padding: 0;
margin: 0;
}
.flex-container {
display: flex;
width: 100%;
}
.flex-column {
padding: 20px;
width: 33.3333%;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
} <!DOCTYPE html> <html> <head> <title>Three Columns with Flexbox</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p> </div> </div> </body> </html>
Flexbox и Grid поддерживаются всеми основными браузерами, так как 2017/2018, факт также подтверждается caniuse.com: могу ли я использовать grid , могу ли я использовать flex .
Существует также ряд классических решений, использовавшихся до эпохи Flexbox и сетки, таких как OneTrueLayout техника , Техника искусственных столбцов , CSS табличная техника отображения , а также техника наслоения .
Я не рекомендую использовать эти методы, потому что они имеют халтурную природу и не так элегантны, на мой взгляд, но хорошо знать их по академическим соображениям.
Решение для одинаково высоких столбцов — это метод табличного отображения CSS , который означает использование функции display:table . Это работает для Firefox 2+ , Safari 3+ , Opera 9+ и IE8 .
Код для табличного отображения CSS
#container {
display: table;
background-color: #CCC;
margin: 0 auto;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
#col1 {
background-color: #0CC;
width: 200px;
}
#col2 {
background-color: #9F9;
width: 300px;
}
#col3 {
background-color: #699;
width: 200px;
}<div>
<div>
<div>
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div>
Column 2<br />Eco cologna duo est!
</div>
<div>
Column 3
</div>
</div>
</div>Даже если есть проблема с автоматическим расширением ширины ячейки таблицы, ее можно легко решить, вставив другой div в ячейку таблицы и придав ей фиксированную ширину. Во всяком случае, чрезмерное расширение ширины происходит в случае использования чрезвычайно длинных слов (которые я сомневаюсь, что кто-то будет использовать, скажем, 600px длинное слово) или некоторых div, чья ширина больше ширины ячейки таблицы.
Метод искусственной колонки является наиболее популярным классическим решением этой проблемы, но он имеет некоторые недостатки, такие как, вы должны изменить размер фонового плиточного изображения, если вы хотите изменить размер столбцов, и это также не элегантное решение.
Метод OneTrueLayout состоит в создании отступа-дна экстремально большой высоты и вырезании его, приведя реальное положение границы к «normal logical position», применяя отрицательное отступ-дно того же огромного значения и скрывая экстент, созданный отступом с переполнением: скрыто применяется к оболочке содержимого. Упрощенным примером может быть:
Рабочий пример:
.wraper {
overflow: hidden; /* This is important */
}
.floatLeft {
float: left;
}
.block {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30000px; /* This is important */
margin-bottom: -30000px; /* This is important */
width: 33.3333%;
box-sizing: border-box; /* This is so that the padding right and left does not affect the width */
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<html> <head> <title>OneTrueLayout</title> </head> <body> <div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit. Praesent sed pellentesque lorem. Nam neque ante, egestas ut felis vel, faucibus tincidunt risus. Maecenas egestas diam massa, id rutrum metus lobortis non. Sed quis tellus sed nulla efficitur pharetra. Fusce semper sapien neque. Donec egestas dolor magna, ut efficitur purus porttitor at. Mauris cursus, leo ac porta consectetur, eros quam aliquet erat, condimentum luctus sapien tellus vel ante. Vivamus vestibulum id lacus vel tristique.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit.</p> </div> </div> </body> </html>
Техника наслоения должна быть очень аккуратным решением, которое включает в себя абсолютное позиционирование div внутри основной относительно расположенной обертки div. Он в основном состоит из нескольких дочерних дивов и основного дива. Главный div имеет императивное положение: относительно его коллекции атрибутов css. Дети этого дива все императивно position:absolute . Дочерние элементы должны иметь верхнее и нижнее значения 0 и левое и правое размеры, установленные для размещения столбцов друг с другом. Например, если у нас есть два столбца, один шириной 100px , а другой шириной 200px, учитывая, что мы хотим 100px в левой части и 200px в правой части, левый столбец должен иметь {left: 0; right: 200px} и правый столбец {left: 100px; right: 0 ;}
На мой взгляд, нереализованная высота 100% в автоматизированном контейнере высоты является серьезным недостатком, и W3C следует рассмотреть возможность пересмотра этого атрибута (который с 2018 года разрешим с помощью Flexbox и Grid).
Другие ресурсы: link1, link2, link3, link4, link5 (важно )
высота авто по содержанию div, высота 100% на фоне div внутри, содержащая div (css, height)
Для решения этой проблемы существует ряд решений, в том числе Технология OneTrueLayout Technique, Техника искусственных колонок, CSS > , а также a Техника слоев.
Решение для столбцов с одинаковой высотой — это Технология табличного отображения CSS, что означает использование display: table. Он работает для Firefox 2 +, Safari 3 +, Opera 9 + и IE8.
Код для Табличного дисплея CSS:
HTML
<div>
<div>
<div>
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div>
Column 2<br />Eco cologna duo est!
</div>
<div>
Column 3
</div>
</div>
</div>
CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
Даже если есть проблема с автоматическим расширением ширины таблицы-ячейки, ее можно легко разрешить, вставив другой div с табличной ячейкой и придав ей фиксированную ширину. Во всяком случае, чрезмерное расширение ширины происходит в случае использования чрезвычайно длинных слов (что я сомневаюсь, что кто-то будет использовать длинное слово длиной 600 пикселей) или какой-либо div, ширина которой больше ширины таблицы.
Технология искусственных колонн является самым популярным решением этой проблемы, но она имеет некоторые недостатки, такие как, вы должны изменить размер фоновое черепичное изображение, если вы хотите изменить размер столбцов, и это также не изящное решение.
OneTrueLayout Technique состоит из создания нижней части крайней большой высоты и ее вырезания, приведя реальное положение границы к «нормальное логическое положение», применяя отрицательный край дна того же огромного значения и скрывая степень, создаваемую дополнением с переполнением: скрытое, применяемое к wapper содержимого. Упрощенный пример:
Файл HTML:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div>
<div>first col</div>
<div>
Second col<br />Break Line
</div>
<div>Third col</div>
</div>
</body>
</html>
Технология Layering Technique должна быть очень аккуратным решением, которое включает в себя абсолютное позиционирование div с основной относительной позицией div. Он в основном состоит из нескольких дочерних div и основного div. Основной div имеет обязательную позицию: относительную для нее сборку css атрибутов. Дети этого дивизиона — все это императивно позиция: абсолютная. У детей должно быть верхнее и нижнее значение 0 и влево-вправо, для размещения столбцов с каждым другой. Например, если у нас есть два столбца, один из которых шириной 100 пикселей, а другой из 200 пикселей, учитывая, что мы хотим, чтобы 100 пикселей в левой части и 200 пикселей в правой части, левый столбец должен иметь {left: 0; right: 200px} и правый столбец {left: 100px; справа: 0;}
По моему мнению, невыполненная высота 100% в автоматическом контейнере высоты является основным недостатком, и W3C должен рассмотреть возможность пересмотра этого атрибута.
Другие ресурсы: link1, link2, link3, link4, link5 (важно)
100%} ничего не происходит? — Хабр Q&A
Всем привет, возник трудность с верстанием:Что конкретно?
Не могу задать высоту контейнеру в 80% от оставшейся высоты видимой части экрана браузера:
* {
margin: 0;
padding: 0;
}
body {
background: #42668C;
color: white;
font-family: Arial, sans-serif;
}
a {
color: white;
text-decoration: none;
}
input[type=button] {
background: #42668C;
color: white;
border: none;
cursor: pointer;
}
.container {
height: ??? /*600*/
}Если высота моего дисплея 768px, то видимая часть с вычетом траты на меню пуск и вкладки — всего ~600px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<div></div>
<div>Добро подаловать!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae rem optio, ut, dignissimos voluptatibus minus dicta quam tempore temporibus. Ex ullam, sapiente esse quibusdam sequi ad provident ipsa repudiandae quas.</div>
<form action="/">
<input placeholder="Телефон или email" type="text">
<input placeholder="Пароль" type="text">
<input type="checkbox"><label for="">Чужой компьютер</label>
<input type="button" value="Войти">
<input type="button" value="Регистрация">
</form>
<a href="#">Забыли пароль?</a>
</div>
</body>
</html>Чего я хочу избежать? Мне не нужна вертикально появляющейся прокрутка!
Почему она появляется или должна появится? Когда я дописываю свойство background liner-gradient(на макете явно он есть), то вот что у меня получается, тырк
Как быть? Почему если написать body {height: 100%} ничего не происходит? Я ожидаю увидеть что height станет высотой оставшейся видимой части экрана браузера
два блока одинаковой высоты / Habr
Задача
Заданы два блочных элемента – один с текстом статьи (ширина 75% от ширины документа), другой с перечнем ссылок для навигации по первому элементу (ширина 25%, расположен слева от первого блока). Высота элемента содержащего статью задается динамически, в зависимости от наполнения блока текстом. Необходимо сделать так, что бы второй блок с навигацией обладал таким же значением параметра высоты как и первый содержащий основной текст статьи.
Техническое уточнение
Ранее подобные задачи решались с помощью TABLE-TR-TD семейства табличных тэгов, но такой подход нарушал принцип отделения структуры данных в разметке (markup — HTML) от способа их стилизации (styling — CSS), поскольки сами данные по характеру представленной информации вовсе не были табличными, а только использовали сходный табличному метод отображения на странице:
<table>
<tr>
<td id=”navigation”>
...перечень a-href ссылок...
</td>
<td id=”content”>
..содержимое статьи...
</td>
</tr>
</table>
Позже стандарт СSS был расширен дополнительными значениями table, table-cell для параметра display, что позволило использовать привычные DIV, SPAN элементы в html-структуре разметки страницы и задавать для них соответствующие css-правила для отображения в виде таблицы с колонками сообщающимися в процентном соотношении как по ширине так и по высоте:
<div id=”wrapper”>
<div id=”navigation”>
...перечень a-href ссылок...
</div>
<div id=”content”>
...содержимое статьи...
</div>
</div>
#wrapper {
display: table;
}
#navigation, #content {
display: table-cell
}
Казалось бы задача была решена, но к сожалению, такой подход не работал в старших версиях браузеров (IE 6, IE 7) заставляя верстальщиков искать другие подходы. Довольно распространенным стало решение с помощью вложенных элементов-оберток смещение которых относительно друг-друга позволяет добиться визуального эффекта равных по высоте колонок:
<div>
<div>
<div>
...перечень a-href ссылок...
</div>
<div>
...содержание...
</div>
</div>
</div>
#navigation, #content {
position: relative;
float: left;
left: -50%;
}
#navigation {
width: 50%;
}
#bg-one, #bg-two {
position:relative;
float: left;
width: 100%;
background-color: #9988ff;
}
#bg-one {
overflow: hidden;
}
#bg-two {
left: 50%;
background-color: #99ff99;
}
Роль колонок здесь выполняют обертывающие тэги (#bg-one, #bg-two) количество которых дублирует вложенные в них тэги с контентом (#content, #navigation). Такая техника работает даже в IE 6, но ее ощутимым недостатком является необходимость добавления большого количества дополнительных элементов (#bg-one, #bg-two) обертывающих тэги с текстом колонок (#content, #navigation). Количество таких элементов оберток (#bg-N) равно количеству фактических блочных-тэгов с колоноками текста. В приведенном выше примере для добавления еще одной колонки (скажем #advertisement) на одном уровне с #navigation и #content придется добавить еще один общий обертывающий элемент bg-three:
<div>
<div>
<div>
<div>
..перечень ссылок a href...
</div>
<div>
..содержание статьи....
</div>
<div>
...рекламные объявления...
</div>
</div>
</div>
</div>
#navigation, #content, #advertisement {
position: relative;
float: left;
left: -64%;
}
#navigation,#content {
width: 32%;
}
#bg-one, #bg-two, #bg-three {
position: relative;
float: left;
width: 100%;
background-color: #9988ff;
}
#bg-one {
overflow: hidden;
}
#bg-two {
left: 32%;
background-color: #99ff99;
}
#bg-three {
left: 32%;
background-color: #a0a0a0;
}
В таком случае html-разметка заметно усложняется – причина наличия обертывающих тэгов неочевидна. Таким образом отказываясь от html-таблиц из-за плохой читабельности разметки мы приходим к еще менее читабельному коду. Ситуацию можно улучшить если перенести обертывающие тэги на один уровень с колонками:
<div>
<div></div>
<div>
..перечень ссылок с a href..
</div>
<div></div>
<div>
...содержание статьи...
</div>
</div>
#wrapper{
position: relative;
float: left;
width: 100%;
}
#navigation, #content {
position: relative;
float: left;
width: 50%;
}
#navigation-bg {
position: absolute;
left: 0;
width: 50%;
height: 100%;
background-color: #ffaaaa;
}
#content-bg {
position: absolute;
left: 50%;
width: 50%;
height: 100%;
background-color: #aaffaa;
}
В таком случае элементы c фоном (#navigation-bg, #content-bg) расположены перед тэгами содержащими текст колонок, что заметно улучшает понимание разметки. Но к сожалению IE 6 не понимает процентных значений заданных в параметре высоты для блочных элементов с абсолютным позиционированием, а для более свежие версии браузеров поддерживают display: table правило, которое позволяет избежать добавочных div-элементов содержащих фон колонок (в примере выше #content-bg, #navigation-bg).
Решение
Читая задание становится заметным что разметка текста с прицелом на последующие применение css-правила display: table, также содержит один лишний тэг:
<div id=”wrapper”>
<nav class=”shakespeare”>
...перечень ссылок...
</nav>
<article class=”shakespeare”>
...содержание статьи...
</article>
</div>
#wrapper {
display: table;
}
.shakespeare {
display: table-cell;
background-color: #f0f0f0;
}
Ведь в таком варианте зависимость высоты колонок двунаправлена, то есть высота блока заданного тэгом nav зависит от высоты блока заданного тэгом article и наоборот — блок article зависит от высоты блока nav. Хотя в данном случае только высота блока nav должна подстраиваться под высоту более длинного тэга article обратная зависимость является лишней:
<article>
<aside>
...перечень ссылок...
</aside>
..содержание статьи
</article>
article {
position: relative;
display: block;
width: 75%;
left: 25%;
background-color: #8888FF;
}
aside {
position: absolute;
display: block;
width: 33%;
left: -33%;
height: 100%;
background-color: #F88888;
}
Процентное значения для аболютных элементов также как и display: table работают в браузере IE начиная только с восьмой версии. Значения ширины и длины блока aside берутся из пересчета относительно размеров блока article, так как в CSS координаты и размеры элемента с абсолютным отсчитывается начиная с первого родительского элемента с нестатичным (relative, absolute, fixed) значеним параметра position. То есть ширина блока article (которая составляет 75% от ширины документа) для aside контейнера равна 100%, составляя пропорцию:
75% - 100%
25% - ?
получаем
25% * 100% / 75% = 33.33%То есть 25% свободного экрана в процентном соотношении блока article.
Таким образом мы можем избавиться от лишнего wrapper элемента, отобразить зависимость одной колонки от другой в коде и не прибегать к методу табличного позиционирования для нетабличных данных.