Кем можно работать в сфере веб-разработки
Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.
Иногда на небольших сайтах, где вся информация на странице помещается в один экран есть необходимость прижимать footer сайта к низу экрана. В противном случае footer будет идти сразу после контентной части, а между концом блока футера и нижней частью экрана останется «просвет». Проблему можно решить при помощи css стилей.
Давайте рассмотрим простой пример, состоящий из 3-х основных блоков, шапки сайта, контентной части и футера.
<div class="container">
<div class="header">
<!-- Содержимое шапки -->
</div>
<div class="content">
<!-- Содержимое контентной/центральной части -->
</div>
<div class="footer">
<!-- Содержимое нижнего блока -->
</div>
</div>
В примере у нас есть родительский общий блок container
и три вложенных блока шапки, контента и футера. Рассмотрим CSS.
html,
body {
height:100%;
}
.container {
min-height:100%;
position:relative;
text-align: center;
max-width: 60%;
margin: 0 auto;
}
/*Шапка сайта*/
.header {
background:#EEE;
padding:10px;
}
/*Контентная часть*/
.content {
padding-bottom:70px; /*Отступаем от низа экрана на высоту блока footer*/
}
/*Стили для нижней части*/
.footer {
position:absolute;
bottom:0;
width:100%;
height:70px;
background:#CCC;
}
Результат можно посмотреть в демо примере.
(Нет голосов) |
Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.
В статье рассмотрены возможности изменения курсоров пользователя при помощи CSS
В статье рассмотрены примеры работы с регистром строк в языке PHP, проверка регистра, изменение, инверсия