CSS для HTML-интерфейса: Заполнение окна браузера
При использовании HTML 5 в качестве интерфейса приложения хочется точно настроить интерфейс под окно браузера.
Напротив, когда речь идет о веб-странице, если интерфейс является плавным, его ширина соответствует текущей ширины браузера, но может превышать длину окна.
В случае с приложением браузер должен путаться с ним: они делают только одно. Таким образом, когда пользователь расширяет окно браузера, он делает это, чтобы увеличить площадь приложения, поэтому оно должно соответствовать по ширины и высоте новым размерам браузера .
Приложение, как правило, имеет фиксированные элементы высоты, такие как панель инструментов и другие компоненты, и контейнеры с различными размерами, поэтому они должны меняться в зависимости от размера браузера, в то время как другие остаются несъемными.
Щелкните изображение для демонстрации
В нашем примере слои «Левая панель» и «Правая панель» различаются по ширины и высоте в зависимости от размера окна. Верхний и нижний колонтитулы имеют фиксированное положение и фиксированную высоту. Только их ширина соответствует ширины окна браузера.
Мы делаем такой интерфейс со специально изученной таблицей стилей и проверим на демо, что ты можешь изменить размер окна по желанию, приложение всегда занимает всю поверхность.
HTML-код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 5 Interface Demo </title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="header">En-tête</div>
<div id="inner">
<div id="lpane">Panel gauche</div>
<div id="rpane">Panel droit</div>
</div>
</div>
<div id="footer">Pied de page</div>
</div>
</body>
</html>
Тег контейнера содержит out и footer. Тег outer содержит header и inner. Врожденный слой разделен на две соседние панели. Ширина и высота обеих панелей зависит от размера окна.
Код CSS
div
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container
{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
padding-bottom:40px;
overflow:hidden;
}
#header
{
width:100%;
height:64px;
}
#outer
{
margin:0px auto;
width:100%;
height:100%;
}
#inner
{
margin:0px;
min-width:480px;
height:100%;
background:white;
padding:0 0 64px 0;
text-align:center;
}
#lpane, #rpane
{
display:inline-block;
width:49.5%;
height:100%;
margin:0px;
min-width:120px;
background:white;
overflow:hidden;
text-align:left;
}
#footer
{
height:40px;
}
Свойство box-sizing: border-box применяется ко всем слоям документа. Это позволяет избежать увеличения размера слоев внутренними полями. Это облегчает управление размерами.
# контейнер в абсолютной позиции. Это важно, так как определяет поведение всех внутренних слоев .
# footer включен в # контейнер. Поскольку padding-bottom имеет 40 пикселей, это ограничивает высоту первого элемента содержимого (# outer) и оставляет место для второго элемента, который всегда виден и внизу страницы .
# header имеет фиксированную высоту и переменную ширину .
# outer и # iner подразделяют страницу по высоте, это чисто слои компоновки и у них нет чистого содержимого.
# outer имеет 100% высоту, но он смещен на 64 пикселей на верхний колонтитул, а также перекрывает нижний колонтитул. Чтобы избежать этого, ему приписывают нижний паддинг на 64px.
# lpane и # rpane соответствуют двум панелям, разделяющим содержимое. Ширина 49,5% и режим отображения: inline-block позволяют выровнять их бок о бок. Будьте осторожны, просто измените поля, чтобы потерять это выравнивание. Если вы хотите создать поля, они также будут назначены элементам, содержащимся в них. Точно так же, если ты хочешь прокрутить их содержимое, ты добавишь внутренний слой со свойством overflow: auto.
Демонстрационная лицензия и таблица стилей: Creative Common. Вы можете использовать демонстрацию для собственных приложений (подумайте о снятии тега мета-роботов) или для офлайн-обучения. Не используйте его для онлайн-учебника .