CSS Липкий нижний колонтитул на странице Wordpress без содержимого Div

Я пытаюсь сделать свой нижний колонтитул до конца страницы так, чтобы он прилипли к основанию.CSS Липкий нижний колонтитул на странице Wordpress без содержимого Div

Я попытался с помощью учебника, где я использовал, что стили 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 */

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

My project I'm working on

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

источник

2012-02-06 Evils

Для достижения липкую колонтитула эффекта вы должны сделать некоторые изменения в ваш 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>

И это должно сделать трюк!

источник

2012-02-06 19:19:35

Спасибо, много! Ты спас мой день;) Это то, что я искал! – Evils

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

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

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

источник

2012-02-06 18:37:10 PAULDAWG

Это не может быть самым простым способом, поскольку я написал, что я использую Wordpress, и поэтому было бы действительно очень сложно изменить мою тему и Wordpress для работы таким образом. – Evils

Я просто посмотрел исходный код вашей страницы и ее ту же структуру. Единственное отличие заключается не только в использовании элементов нижнего колонтитула div. Итак, в вашем css нет идентификатора нижнего колонтитула, поэтому css должен быть только нижним колонтитулом {}. Попробуйте извлечь все, что позиционирует css, поскольку элементы уже находятся в правильных положениях для вашего сайта. вам нужно всего лишь применить clear: оба фиксируют элементы сразу после других, которые используют какое-то позиционное позиционирование, чтобы свести их на следующий уровень. – PAULDAWG

CSS Липкий нижний колонтитул на странице Wordpress без содержимого Div

ответ

Смежные вопросы