Как сохранить положение нижнего колонтитула под содержимым на нескольких страницах - PullRequest
Новая
       30

Как сохранить положение нижнего колонтитула под содержимым на нескольких страницах

0 голосов
/ 07 мая 2018

Итак, я изучаю HTML, CSS, PHP, и я использую php include для добавления верхнего и нижнего колонтитула. Я могу установить нижний колонтитул на определенную высоту для каждой страницы или установить его индивидуально, создав отдельные таблицы стилей.

Есть ли способ заставить нижний колонтитул появляться под содержимым для каждой страницы, использующей php include? Когда содержание разной длины на каждой странице?

Вот мой код нижнего колонтитула

HTML 

<footer>
  <ul>
    <a href="../../page1.php">
      <li>page1</li>
    </a>
    <a href="../../page2.php">
      <li>page2</li>
    </a>
    <a href="../../page3.php">
      <li>page3</li>
    </a>
    <a href="../../page4.php">
      <li>page4</li>
    </a>
    <a href="../../page5.php">
      <li>page5</li>
    </a>
  </ul>
</footer>

CSS 

footer {
  padding: 20px;
  margin-top: 450px;
  height: 1%;
  color: #ffffff;
  background-color: #30323D;
  text-align: center;
}

footer ul {
  margin-left: 0;
  padding: 0;
  list-style-type: none;
  float: left;
}

footer ul a {
  text-decoration: none;
  color: #fff
}

footer p {
  margin-top: 120px;
}

При использовании абсолютного положения

Ответы [ 3 ]

0 голосов
/ 07 мая 2018

Ваш нижний колонтитул должен отображаться внизу вашей страницы, если он записан в ваш HTML внизу. Там не должно быть необходимости каких-либо специальных уловок, чтобы держать его там. Я удалил объявление float:left из вашего CSS, а также объявление position:absolute. Нет необходимости ни в одном из них.

https://jsfiddle.net/90cbe4km/1/

Ваши элементы всегда будут отображаться в том же порядке на вашей странице, что и в HTML, если вы не перемещаете их с помощью CSS

0 голосов
/ 26 мая 2018

Мне удалось устранить проблему, с которой я столкнулся

Вот JSFiddle

https://jsfiddle.net/lewisjames101/4h20Lwzm/

HTML
<div id="container">
<div id="header">My Header</div>
<div id="body">Small amount of content</div>
<div id="footer">My 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;
 }

Спасибо за ваш вклад, это было полезно

0 голосов
/ 07 мая 2018

Я думаю, что вы хотите position: relative. это позволяет расположить нижний колонтитул после всего содержимого на странице. 

footer {
   position: relative;
   padding: 20px;
   color: #ffffff;
   background-color: #30323D;
   text-align: center;
}
...