Установить положение div в нижней части его контейнера можно с помощью bottom и свойства position. Установите значение позиции в абсолютное значение и нижнее значение в ноль, чтобы поместить div в нижней части контейнера.
Атрибут Position может принимать несколько значений, которые перечислены ниже:
- absolute: это свойство используется, когда положение деления относительно его родителя, что идет в этом примере.
- relative: это свойство используется, когда положение деления относительно других компонентов на экране.
- fixed: это свойство используется, когда положение компонента должно быть зафиксировано на экране независимо от других компонентов HTML.
Свойство position вместе с атрибутами, такими как left, right, top и bottom, можно использовать для отображения соответствующего позиционирования.
Пример 1:
HTML
Код
<body>
<div class="kasunavwg-utavopmab">
<h1>HTML и CSS</h1>
<div class="mudescazu-qanopag">
<p>В самом низу сайта и интернет ресурса</p>
</div>
</div>
</body>
CSS
Код
.kasunavwg-utavopmab {
text-align:center;
position: relative;
left: 50px;
height: 195px;
width: 478px;
background-color: #077307;
}
.mudescazu-qanopag {
position: absolute;
bottom: 0px;
}
p {
margin-left:110px;
}
Демонстрация
Пример 2:
В этом примере используйте таблицу для отображения содержимого в нижней части тела. Свойство top и bottom используется для установки содержимого в верхнюю и нижнюю позиции.
HTML
Код
<table class="vedagesampoas_div">
<tr>
<td valign="top"><h1>ZorNet - портал для вебмастера</h1></td>
</tr>
<tr>
<td valign="bottom"><p>Интересные решения для вебмастера</p></td>
</tr>
</table>
</body>
CSS
Код
html, body {
height: 100%;
background-color: #7adffb;
}
.vedagesampoas_div {
height: 100%;
width:100%;
border-collapse: collapse;
}
h1, p {
text-align:center;
}
* {
padding: 0;
margin: 0;
}
Демонстрация
