Липкий нижний колонтитул

Я сделал следующий CSS для липкого нижнего колонтитула, но проблема, с которой я сталкиваюсь, заключается в том, что когда содержимое переполняется прокруткой, то содержимое содержимого скрывается за нижним колонтитулом (см. прикрепленный снимок экрана). Пожалуйста, дайте мне знать, как я могу исправить эту проблему, поэтому липкий нижний колонтитул должен придерживаться нижнего предела до некоторого определенного количества верхнего слоя или тому подобного, а содержимое не должно скрываться.

enter image description here

CSS

.fo {
    position: absolute;
    left: 0;
    bottom: 0;
    height:65px;
    width: 100%;
    color: #eaeaea;
    margin-left: -8px;
}

Ответы

Ответ 1

Я встретил этот ответ в Интернете в прошлом. Отлично работает:

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

    html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
/* IE 6 and down:
#container {
   height:100%;
}

Ответ 2

Извините, если это слишком старо, но я придумал решение, которое получилось очень хорошо для меня! Я создал четкий div и дал ему высоту.

.clear { clear: both; height: 60px; }

<div class="clear"></div>
<div id="footer">FOOTER CONTENT</div>

Высота - это то, что вам нужно для хранения содержимого выше нижнего колонтитула, например. выше, чем нижний колонтитул. Если нижний колонтитул равен 50 пикселей; высокий, я 60px; для высоты в ясном div. Поэтому, когда я прокручиваю, нижний колонтитул остается на месте, но когда я добираюсь до нижней части, содержимое, которое течет из-за нижнего колонтитула, имеет место, чтобы проталкиваться выше нижнего колонтитула, не закрываясь. Супер простой, и он отлично работал. Может быть, кто-то может исправить меня, если с этим что-то не так, например, конфликт какой-то. Извините, это более старая запись, но я чувствовал, что могу добавить к этому, так как я сам нашел это сообщение для поиска решения.

Ответ 3

У меня были проблемы с этим, когда я придумал свое решение. Я установил нижний колонтитул height 10%:

footer{
  position: fixed;
  **height:10%;**
  width:100%;
  padding-top: 2px;
  bottom: 0;
  clear: both;
  background-color: black;
  color: white;
  float: left;
  overflow: auto;
}

и мой контент должен иметь bottom margin 11%:

#content{
  width: 800px;
  margin: auto;
  background-color: rgba(0,0,0,.7);
  color: #99FFCC;
  height: 80%;
  padding:30px;
  **margin-bottom: 11%;**
}

Я надеюсь, что это поможет любому, у кого была такая же проблема!

Ответ 4

У меня была одна и та же проблема, и другие решения указали мне в правильном направлении, но поскольку я использую Angular Material, мне нужно было добавить layout = "column", и он отлично работал

    <div id="container" layout="column">
       <div id="header"></div>
       <div id="body"></div>
       <div id="footer"></div>
    </div>

Ответ 5

Я просто добавил тег br 5 раз в конце основного текста, чтобы создать дополнительные лишние пробелы. Это помогло мне.

иногда сохраняя простые работы!!!