CSS Sticky Footer на странице Wordpress без содержимого Div - PullRequest
Новая
       7

CSS Sticky Footer на странице Wordpress без содержимого Div

1 голос
/ 06 февраля 2012

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

Я попытался использовать учебник, в котором использовал стили CSS, чтобы нижний колонтитул прилипал к нижней части: 

    * { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 175px; }  /* must be same height as the footer */

#footer {
        position: relative;
    margin-top: -175px; /* negative value of footer height */
    height: 175px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Я пытаюсь заставить это работать часами, может кто-нибудь проверить мою проблему?

Мой проект, над которым я работаю

Заранее спасибо

Ответы [ 2 ]

1 голос
/ 06 февраля 2012

Чтобы добиться эффекта липкого нижнего колонтитула, необходимо внести некоторые изменения в свой HTML и CSS, попробуйте следующее:

CSS 

html, body {
    height: 100%;
}

#colophon:before, #colophon:after {
    content: "";
    display: table;
    zoom:1; /*ie fix*/
}
#colophon:after {
    clear: both;
}
footer {
    display: block;
}

#page {
    height: auto !important;
    margin: 2em auto -175px;
    max-width: 1000px;
    min-height: 100%;
}

HTML

Чтобы нижний колонтитул прилип к нижней части, его необходимо отделить от контейнера #page, например: 

<div id="page" class="hfeed">..</div>
<footer id="colophon" role="contentinfo">...</footer>

И это должнотрюк!

0 голосов
/ 06 февраля 2012

это проще, чем то, что вы делаете.попробуйте эту структуру 

<html>
<body>
<div id="centering-div">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>
</body>
</html>

Таким образом, содержимое нижнего колонтитула всегда будет внизу.Вы можете добавить стили CSS к идентификатору centering-div, чтобы задать ширину сайта и центрирование css.Вам не нужно указывать расположение на разделах страницы, которые охватывают всю ширину.внутри содержимого div - это место, куда вы должны поместить весь свой контент.

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

Похожие темы

...