Как сделать нижний колонтитул зафиксированным в нижней части страницы

Question

В моем HTML у меня есть div, классифицированный как «нижний колонтитул».Я хочу, чтобы он имел значение bg до # 000 и занимал всю ширину страницы и не оставлял пробелов после него.

В настоящее время я использую этот CSS:

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

Но полная страницаширина не заполнена этим кодом CSS.

Любая помощь?Спасибо!

Answer 1

Я использую липкий нижний колонтитул: http://ryanfait.com/sticky-footer/

/*

    Sticky Footer by Ryan Fait
    http://ryanfait.com/

    */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

По сути, оболочка имеет высоту 100%, с отрицательным полем высота нижнего колонтитула, обеспечивающая всегда нижний колонтитул без прокрутки.

Это должно достичь вашей цели - иметь нижний колонтитул шириной 100% и более узкое тело, поскольку элементы div являются элементами уровня блока, а их ширина по умолчанию равна 100% их родительского элемента. Имейте в виду, что нижний колонтитул здесь не содержится в файле div.

Answer 2

Вы можете сделать div нижнего колонтитула абсолютным для этой страницы:

.footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    margin: 0;
    background-color: #000;
    height: 100px;/* or however high you would like */
}

Answer 3

Я использую несколько DIV элементов для каждой секции своих веб-страниц.

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

Каждая секция расположена относительно.Используя обтекание DIV s, я могу установить обертку определенной ширины, а элементы внутри нее могут быть 100% width.

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

Answer 4

html:

<div class="footer">
    <p>
        Some text comes here! &copy; 2015 - 2017
    </p>
</div>

css:

.footer {
    width: 100%;
    height: auto;
    text-align: center;
    background: rgb(59, 67, 79);
    position: fixed;
    bottom: 0%;
    margin-top: 50%;
}

* {
    padding: 0;
    margin: 0;
}

Answer 5

Вы можете использовать эти стили в своем CSS для достижения своей цели

.footer{
   background-color: #000;
   min-width: 100%;
   height: 100px;
   bottom:0;
   position: fixed;
}

Если вы используете начальную загрузку, попробуйте с поля margin-left: -15px и margin-right: -15px, но в этом нет необходимостив большинстве случаев, когда у вас есть свой собственный класс.

Answer 6

Эта проблема возникла, когда я запустил веб-приложение с использованием меню Bootstrap и фиксированного нижнего колонтитула независимо от разрешения браузера.

Использование стиля ниже для элемента нижнего колонтитула

In-line style

Внешняя таблица стилей с использованием атрибута класса в Div

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

style.css

  .footer
  {
   backgroud-color:black;
   position:fixed;
   bottom:0;
   height:2%;
  }

Внешняя таблица стилей с использованием атрибута id в Div

 <div id="divfooter"></div>

style.css

 #divfooter
 {
  backgroud-color:black;
  position:fixed;
  bottom:0;
  height:2%;
 }

Answer 7

, если вы хотите, чтобы ваш нижний колонтитул был зафиксирован на вашей странице:

.footer{ position:fixed;}

, но если вы хотите, чтобы ваш нижний колонтитул фиксировал конец страницы:

посмотрите, что

Answer 8

Я рад за поддержку, которую вы все оказали, каждый из этих ответов как-то помог мне. Я пришел к этому коду:

.footer {
  height: 59px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  top: 508px;
}

Спасибо! * * 1004