• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как разместить div в нижней части страницы (Как поставить div в нижней части его контейнера на CSS)
Как разместить div в нижней части страницы
Kosten
Дата: Пятница, 2019-04-12, 00:15 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


Установить положение 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;
   }

Демонстрация
Прикрепления: 4772966.png(6.2 Kb) · 9064437.png(12.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как разместить div в нижней части страницы (Как поставить div в нижней части его контейнера на CSS)
  • Страница 1 из 1
  • 1
Поиск: