Сделайте так, чтобы div заполнял высоту оставшегося пространства экрана.
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я работаю над веб-приложением, в котором хочу, чтобы контент занимал всю высоту экрана.
На странице есть шапка, содержащая логотип и информацию об аккаунте.Это может быть произвольная высота.Я хочу, чтобы элемент содержимого заполнял остальную часть страницы до низа.
у меня есть заголовок div и контент div.На данный момент я использую таблицу для макета следующим образом:
CSS и HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>Вся высота страницы заполняется, прокрутка не требуется.
Для всего, что находится внутри div контента, настройка top: 0; поместит его прямо под заголовок.Иногда контент представляет собой настоящую таблицу с высотой, установленной на 100%.положить header внутри content не позволит этому работать.
Есть ли способ добиться того же эффекта без использования table?
Обновлять:
Элементы внутри контента div высота также будет установлена в процентах.Так что что-то на 100% внутри div заполню его до дна.Как и два элемента по 50%.
Обновление 2:
Например, если заголовок занимает 20% высоты экрана, таблица, указанная на 50% внутри #content будет занимать 40% места на экране.Пока что единственное, что работает, — это обернуть все это в таблицу.
Решение
Обновление 2015 года:подход с использованием флексбокса
Есть два других ответа, вкратце упоминающих флексбокс;однако это было более двух лет назад, и они не приводят никаких примеров.Спецификация flexbox теперь определенно определена.
Примечание:Хотя спецификация CSS Flexible Boxes Layout находится на стадии кандидатской рекомендации, не все браузеры реализовали ее.Реализация WebKit должна иметь префикс -webkit-;Internet Explorer реализует старую версию спецификации с префиксом -ms-;Opera 12.10 реализует последнюю версию спецификации без префиксов.Актуальный статус совместимости см. в таблице совместимости для каждого свойства.
(взято из https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
Все основные браузеры и IE11+ поддерживают Flexbox.Для IE 10 или старше вы можете использовать прокладку FlexieJS.
Чтобы проверить текущую поддержку, вы также можете увидеть здесь:http://caniuse.com/#feat=flexbox
Рабочий пример
С помощью flexbox вы можете легко переключаться между любыми строками или столбцами, имеющими фиксированные размеры, размеры содержимого или размеры оставшегося пространства.В моем примере я настроил заголовок так, чтобы он привязывался к его содержимому (согласно вопросу ОП), я добавил нижний колонтитул, чтобы показать, как добавить область фиксированной высоты, а затем установил область содержимого, чтобы заполнить оставшееся пространство.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>В приведенном выше CSS гибкий свойство сокращает гибкий рост, гибкая термоусадка, и гибкая основа свойства для установления гибкости гибких элементов.В Мозилле есть хорошее введение в модель гибких коробок.
Другие советы
На самом деле не существует надежного кроссбраузерного способа сделать это в CSS.Предполагая, что ваш макет сложен, вам нужно использовать JavaScript, чтобы установить высоту элемента.Суть того, что вам нужно сделать, заключается в следующем:
Element Height = Viewport height - element.offset.top - desired bottom margin
Как только вы сможете получить это значение и установить высоту элемента, вам необходимо прикрепить обработчики событий как к загрузке окна, так и к изменению размера, чтобы вы могли запустить функцию изменения размера.
Кроме того, если ваш контент может быть больше, чем область просмотра, вам нужно будет установить overflow-y для прокрутки.
Исходное сообщение более 3 лет назад.Я предполагаю, что многие люди, которые приходят к этому посту, как и я, ищут решение макета, подобное приложению, скажем, каким-то образом фиксированный заголовок, нижний колонтитул и контент во всю высоту, занимающий остальной экран.Если да, то этот пост может помочь, он работает на IE7+ и т. д.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
И вот некоторые фрагменты из этого поста:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>Вместо использования таблиц в разметке вы можете использовать таблицы CSS.
Разметка
<body>
<div>hello </div>
<div>there</div>
</body>
(Соответствующий) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
Некоторые преимущества этого метода:
1) Меньше наценки
2) Разметка более семантическая, чем таблицы, потому что это не табличные данные.
3) Поддержка браузера есть очень хороший:IE8+, Все современные браузеры и мобильные устройства (могу ли я использовать)
Для полноты приведем элементы HTML, эквивалентные свойствам CSS для Модель таблицы CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Только CSS-подход (если высота известна/фиксирована)
Если вы хотите, чтобы средний элемент занимал всю страницу по вертикали, вы можете использовать calc() который представлен в CSS3.
Предполагая, что у нас есть фиксированная высота header и footer элементы, и мы хотим, чтобы section тег, занимающий всю доступную вертикальную высоту...
Предполагаемая разметка
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
Итак, ваш CSS должен быть
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
Итак, вот что я делаю: складываю высоту элементов и вычитаю из нее 100% с использованием calc() функция.
Просто убедитесь, что вы используете height: 100%; для родительских элементов.
Использовал:height: calc(100vh - 110px);
код:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>Как насчет того, чтобы просто использовать vh что означает view height в CSS...
Посмотрите на фрагмент кода Я создал для вас ниже и запустил его:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>Также посмотрите на изображение ниже, которое я создал для вас:
CSS3 простой способ
height: calc(100% - 10px); // 10px is height of your first div...
все основные браузеры в наши дни поддерживают его, так что продолжайте, если у вас нет необходимости поддерживать старые браузеры.
Это можно было бы сделать чисто CSS с использованием vh:
#page
{
display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent
{
float:left; width:100%; display:block;
}
#content
{
float:left; width:100%; height:100%; display:block; overflow:scroll;
}
и HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
Я проверил, работает во всех основных браузерах: Chrome, IE, и FireFox
Простое решение с использованием flexbox:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>Альтернативное решение с элементом div, центрированным внутри элемента содержимого.
Ни одно из опубликованных решений не работает, когда вам нужно, чтобы нижний div прокручивался, когда контент слишком высокий.Вот решение, которое работает в этом случае:
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Первоисточник:Заполнение оставшейся высоты контейнера при обработке переполнения в CSS
Я тоже искал ответ на этот вопрос.Если вам посчастливилось использовать IE8 и более поздние версии, вы можете использовать display:table и связанные значения, чтобы получить правила рендеринга таблиц с элементами уровня блока, включая div.
Если вам повезло еще больше и ваши пользователи используют браузеры верхнего уровня (например, если это приложение интрасети на компьютерах, которыми вы управляете, как в моем последнем проекте), вы можете использовать новый Гибкая компоновка коробки в CSS3!
Что сработало для меня (с div внутри другого div, и я предполагаю, что во всех других обстоятельствах) — это установить нижнее отступ на 100%.То есть добавьте это в свою таблицу стилей/css:
padding-bottom: 100%;
Отказ от ответственности:Принятый ответ дает представление о решении, но я нахожу его немного раздутым из-за ненужной оболочки и правил CSS.Ниже приведено решение с очень небольшим количеством правил CSS.
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
Решение выше использует единицы видового экрана и флексбокс, и, следовательно, является IE10+, при условии, что вы используете старый синтаксис для IE10.
Codepen для игры: ссылка на коден
Или этот, для тех, кому нужно, чтобы основной контейнер можно было прокручивать в случае переполнения содержимого: ссылка на коден
<!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">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
Во всех нормальных браузерах вы можете поместить разделитель «заголовок» перед содержимым как его родственный элемент, и тот же CSS будет работать.Однако IE7- неправильно интерпретирует высоту, если в этом случае значение float равно 100%, поэтому заголовок должен находиться В содержимом, как указано выше.Переполнение:auto вызовет двойную полосу прокрутки в IE (в котором полоса прокрутки области просмотра всегда видна, но отключена), но без нее содержимое будет обрезано, если оно переполнится.
Сейчас есть масса ответов, но я нашел, используя height: 100vh; для работы с элементом div, который должен заполнить все доступное вертикальное пространство.
Таким образом, мне не нужно экспериментировать с отображением или позиционированием.Это пригодилось при использовании Bootstrap для создания информационной панели, в которой у меня была боковая и основная панели.Я хотел, чтобы основной цвет растягивался и заполнял все вертикальное пространство, чтобы можно было применить цвет фона.
div {
height: 100vh;
}
Поддерживает IE9 и выше: нажмите, чтобы увидеть ссылку
Если вы можете справиться с отсутствием поддержки старых браузеров (то есть MSIE 9 или старше), вы можете сделать это с помощью Модуль гибкой компоновки коробок это уже W3C CR.Этот модуль также позволяет использовать другие интересные трюки, такие как изменение порядка контента.
К сожалению, MSIE 9 или более ранняя версия не поддерживают это, и вам придется использовать префикс поставщика для свойства CSS для каждого браузера, кроме Firefox.Будем надеяться, что другие поставщики тоже вскоре откажутся от этого префикса.
Другим выбором будет CSS-сетка но у него еще меньше поддержки в стабильных версиях браузеров.На практике это поддерживает только MSIE 10.
Я долго боролся с этим и в итоге получил следующее:
Поскольку сделать DIV содержимого той же высоты, что и родительский, легко, но, по-видимому, сложно сделать его родительской высотой за вычетом высоты заголовка, я решил сделать div содержимого полной высоты, но расположить его абсолютно в верхнем левом углу, а затем определить отступ. для верха, который имеет высоту заголовка.Таким образом, контент аккуратно отображается под заголовком и заполняет все оставшееся пространство:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
Почему бы не просто так?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
Дать вам высоту html и тела (в этом порядке), а затем просто указать высоту вашим элементам?
Работает для меня
style="height:100vh"
решил проблему для меня.В моем случае я применил это к требуемому div
Просто определяя body с display:grid и grid-template-rows с использованием auto и fr ценное имущество.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>Вы действительно можете использовать display: table разделить область на два элемента (заголовок и содержимое), где заголовок может различаться по высоте, а содержимое заполняет оставшееся пространство.Это работает со всей страницей, а также когда эта область представляет собой просто содержимое другого элемента, расположенного с помощью position установлен в relative, absolute или fixed.Это будет работать до тех пор, пока родительский элемент имеет ненулевую высоту.
Посмотрите эту скрипку а также код ниже:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
Винсент, я отвечу еще раз, используя ваши новые требования.Поскольку вас не заботит скрытие содержимого, если оно слишком длинное, вам не нужно перемещать заголовок.Просто поместите переполнение скрытым в теги html и body и установите #content высота до 100%.Содержимое всегда будет длиннее области просмотра на высоту заголовка, но оно будет скрыто и не будет вызывать полос прокрутки.
<!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">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
Попробуй это
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Я нашел довольно простое решение, поскольку для меня это была всего лишь проблема дизайна.Я хотел, чтобы остальная часть страницы не была белой под красным нижним колонтитулом.Поэтому я установил цвет фона страниц на красный.И цвет фона содержимого станет белым.Если высота содержимого установлена, например.20em или 50% почти пустая страница не оставит всю страницу красной.
Для мобильного приложения я использую только VH и VW.
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
У меня была та же проблема, но я не смог решить проблему с помощью флексбоксов, описанных выше.Поэтому я создал свой собственный шаблон, который включает в себя:
- заголовок с элементом фиксированного размера
- нижний колонтитул
- боковая панель с полосой прокрутки, занимающей оставшуюся высоту
- содержание
Я использовал флексбоксы, но более простым способом, используя только свойства. отображать:гибкий и гибкое направление:строка|столбец:
Я использую angular и хочу, чтобы размеры моих компонентов составляли 100% размера их родительского элемента.
Ключевым моментом является установка размера (в процентах) для всех родителей, чтобы ограничить их размер.В следующем примере высота моего приложения занимает 100% области просмотра.
Основной компонент занимает 90% области просмотра, потому что верхний и нижний колонтитулы занимают 5%.
Я разместил свой шаблон здесь: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
Отталкиваясь от идеи г-на.Чужак...
Кажется, это более чистое решение, чем популярный гибкий блок для браузеров с поддержкой CSS3.
Просто используйте минимальную высоту (вместо высоты) с помощью Calc() для блока контента.
Calc() начинается со 100% и вычитает высоту верхних и нижних колонтитулов (необходимо включить значения заполнения)
Использование «min-height» вместо «height» особенно полезно, поскольку оно может работать с содержимым, отображаемым на JavaScript, и с такими средами JS, как Angular2.В противном случае вычисление не переместит нижний колонтитул в нижнюю часть страницы, как только станет видимым содержимое, отображаемое JavaScript.
Вот простой пример верхнего и нижнего колонтитула с высотой 50 пикселей и отступом 20 пикселей для обоих.
HTML:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
Конечно, математику можно упростить, но суть вы поняли...
Это динамический расчет пространства экрана для напоминания, лучше использовать Javascript.
Вы можете использовать технологию CSS-IN-JS, как показано ниже в библиотеке:
это у меня никогда не получалось иначе, чем с использованием JavaScript как предложил NICCAI в самом первом ответе.Я использую этот подход для изменения масштаба <div> с картами Google.
Вот полный пример того, как это сделать (работает в Safari/FireFox/IE/iPhone/Andorid (работает с вращением)):
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
