Нижний колонтитул не показывает, как я хотел бы

0

Итак, я уже некоторое время пытался выяснить, как правильно разместить нижний колонтитул. Я просматривал некоторые уже заданные вопросы здесь, и я нашел некоторые идеи, которые я реализовал, но это не помогло мне работать.

Вот основное объяснение. У меня есть написанный код для моего нижнего колонтитула. Проблема в том, что нижний колонтитул "летает" на странице, если пост не длинный. Я кодирую (лучше сказать переписывание) простую CMS от C до PHP, и я не в CSS или дизайн в целом.

Вот код:

#footer {
       position: static;
       background: #346 repeat scroll 0 0;
       border-top:3px solid #CCCCCC;
       clear: both;
       color:#FFFFFF;
       font-size:x-small;
       line-height:100%;
       margin: 2em 0 0;
       width: 100%;
       text-align: center;
       padding:3px 10px 10px;
       bottom: 0;
}

Единственное сообщение (плохое, вы видите пустое место слева внизу нижний колонтитул): одно сообщение http://easycaptures.com/fs/uploaded/836/0399596165.png Немногочисленные сообщения, которые заполняли всю страницу (хорошо, внизу внизу страницы): полный просмотреть http://easycaptures.com/fs/uploaded/836/4115186425.png

С другой стороны, когда у меня установлена фиксированная позиция, у меня есть это переполнение: ошибка http://easycaptures.com/fs/uploaded/836/1684455056.png

Как заставить мой код работать отлично, как на картинке, где он говорит (хорошо)?

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

Вот мой код контейнера:

#contener {
     margin: 0 auto;
     text-align: left;
     width: 100%;
}

Другие:

body, html, #menu, img, a img, form, fieldset {
    margin:0;
    padding:0;
    font-size: 12px;
}


Когда я установил положение "абсолютное", я получил эту фотографию.

Вот мой полный код разбивки на страницы + нижний колонтитул:

<?php
    $currentPage = 1;               
    if(isset($_GET['page'])){
        $currentPage = protect_sqli($_GET['page']); 
    }       

    $e = $currentPage * $num_psts;                                  // end post
    $p = $e - $num_psts+1;                                          // start post
    $i = 0;                                                             

    // Create a connection
    $conS =     mysqli_connect($hName, $dbUser) or die(mysql_error());

    // Select a specific database
                mysqli_select_db($conS, $dbName) or die(mysql_error());

    // Query creating
    $result = mysqli_query($conS, "SELECT * FROM posts ORDER BY dat DESC, tim DESC");
    while($row = mysqli_fetch_array($result))
    {
        $i++;
        if($i >= $p && $i <= $e)
        {
            $postId = protect_sqli($row['slug']);
            readfile('p/' . $postId . '.php');
        }
    }

?>

<center>
    <p>
    <?php 
        $result     = mysqli_query($conS, "SELECT id FROM posts");
        $nPosts     = mysqli_num_rows($result);                     // number of posts

        mysqli_close($conS);

        echo "Pages: ";

        $pages = $nPosts/$num_psts;                                 // number of pages

        for($i = 1; $i < $pages+1; $i++)                    
        {
            if($i == $currentPage)
            {
                echo "<strong>".$i."</strong> ";
            }
            else
            {
                echo "<a href=\"?page=". $i ."\">". $i ."</a> ";
            }
        }

    ?>
    </p>
</center>

<div id="footer">
    <?php readfile(__DIR__ . "/mvc/fe/footer.php"); ?>
</div>
</div>

footer.php:

Made by dn5 | <a href="https://github.com/dn5/cblogphp" target="_blank"><font color="#e1c1aa">cblogphp</font></a>
  • 0
    HTML, пожалуйста. Лучше, скрипка: jsfiddle.net
  • 0
    position: absolute; Статическая позиция по умолчанию;)
Показать ещё 1 комментарий
Теги:

4 ответа

1

Вы имеете в виду липкий нижний колонтитул, который всегда находится внизу вашего сайта?

CSS выглядит следующим образом:

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}
  • 0
    Не будет ли height: auto !important всегда перезаписывать height: 100% ?
  • 0
    тьфу, хороший вопрос Я думаю, что это должно быть да. Но вам не нужно это менять.
1

Я думаю, что то, что вы ищете, это Sticky Footer. У Райан Файт есть некоторые четкие инструкции здесь

  • 0
    Я действительно ценю ваш вклад, но держусь подальше от фрагментов. Я многому учусь, намного лучше, кодируя это самостоятельно. Спасибо, в любом случае!
  • 0
    @ dn5 Я бы не назвал это решение фрагментом кода. Это быстро становится отраслевым стандартом.
0

Попробуйте изменить положение на абсолютное:

#footer {
       position: absolute;
       background: #346 repeat scroll 0 0;
       border-top:3px solid #CCCCCC;
       clear: both;
       color:#FFFFFF;
       font-size:x-small;
       line-height:100%;
       margin: 2em 0 0;
       width: 100%;
       text-align: center;
       padding:3px 10px 10px;
       bottom: 0; 

}

Демо: http://jsfiddle.net/JE5fn/1/

  • 0
    Это ПОЧТИ работало. Вот выход. Пагинация отправляется ниже нижнего колонтитула. рисунок
  • 0
    Можете выложить код для нумерации страниц?
Показать ещё 1 комментарий
0

Из трюков CSS: http://css-tricks.com/snippets/css/sticky-footer/

<div class="page-wrap">

  Content!

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню