Проблема с вёрсткой, позиционирование

127

30 марта 2021, 14:30

В общем проблема в том, что не могу поставить footer в самый низ страницы, он постоянно куда-то скачет. Вот пример где он сейчас https://o525.ru/QeujeQyQNHrkQOyE6ZHZT5RkuVk ( сам футр на сайте ) https://o525.ru/2M9-hDAuf34_nxcF2xPkMbtdcZE ( html )

Такие стили я ему задал:

.footer {
background-color: rgb(141, 141, 141,0.5);
display: block;
position: absolute;
top: 100%;
font-size: medium

} Пробовал с relative в position, он становится таким: https://o525.ru/5rRKv-KVIr4osJ9sKbBAMHsXdQA

Попробовал использовать display: inline;, ничего близко к правильному результату, не получилось.

Answer 1

.footer { 
  background-color: rgb(141, 141, 141, 0.5); 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 50px; 
}

<div class="main"> 
 
</div> 
<footer class="footer"> 
 
</footer>

Код, конечно, не супер... но попробуйте так, у меня получилось:

.footer {
   background-color: rgb(141, 141, 141, 0.5);
   height: 50px;
 }
 body {
   margin: 0px;
   display: flex;
   flex-direction: column;
   background-image: url(../img/bg_main.png);
 }

Answer 2

После последнего блока с классом "right_content" добавьте блок с классом "clearfix" (или любым другим названием класса, это не принципиально). А в стилях пропишите.clearfix {clear:both}

Вот здесь исправленный вариант https://codepen.io/AnastasiiaIlina/pen/NZJvBK