нижний колонтитул не касается дна, а если он абсолютный, он скрывает контент? - PullRequest
Новая
       0

нижний колонтитул не касается дна, а если он абсолютный, он скрывает контент?

0 голосов
/ 28 мая 2020

Итак, мой нижний колонтитул не касается нижней части страницы. Когда я устанавливаю его в положение: абсолютное, это происходит, но затем он скрывает содержимое страницы, и я не могу прокручивать вниз. можно как-то настроить содержание основного текста выше нижнего колонтитула? или заставить нижний колонтитул оставаться внизу? (я не включил свое тело в фрагмент, поскольку в основном это изображения) 

.footer {
	position: relative;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0px;
    width: 100%;
    background-color: #F9F9F9;
    text-align: center;
	box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
    /*outline: 2px dashed orange;*/
}
.footerline {
    padding: 80px;
    display: flex;
    font-family: 'Source Code Pro', monospace;
    font-style: normal;
    font-weight: 200;
    font-size: 15px;
    color: #D5D5D5;
    justify-content: center;
    align-items: center;
    /*outline: 2px dashed orange;*/
}
#footerlineshadow {
	color: rgba(240,240,240, 0.9);
    text-shadow: 1px 1px 1px #fff, 0 0 0 #000, 1px 1px 1px #fff;
}
<body>
content here
</body>
<footer class="footer">
	  <div class="footerline">
	    <p id= footerlineshadow>&ltp&gtThis is a Footer&lt/p&gt</p>
      </div>
</footer>

Ответы [ 2 ]

2 голосов
/ 28 мая 2020

Самым простым решением было бы:

  • установить .footer на фиксированное
  • добавить в тело margin-bottom: x, где x - высота вашего нижнего колонтитула
2 голосов
/ 28 мая 2020

Вы должны использовать position: fixed в нижнем колонтитуле, если вы хотите, чтобы нижний колонтитул оставался фиксированным и не прокручивался вообще. С position: relative нижний колонтитул будет чуть ниже содержимого, и, поскольку у вас меньше содержимого, он не касается низа, как вы упомянули. 

.footer:{
  position:fixed;
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...