2013-11-14 3 views
0

У меня проблема с моей страницей. Проблема в том, что контент находится под нижним колонтитулом.содержание перейти под страницу нижний колонтитул

Смотрите мой вопрос здесь http://www.webdevout.net/test?0138

Контейнер

height:100% 

position:relative в то время как нижний колонтитул absolute и bottom:0; Я думал, сноска была сделана таким образом, что мне не хватает? Мне нужен нижний колонтитул, чтобы иметь 50px (может быть) расстояние от контента всегда.

+0

«Отладка моего веб-сайта» вопросы, имеющие только ссылку на сайт, скорее всего, будут закрыты. Чтобы этого избежать, вы должны создать минимальный, но полный пример, который показывает проблему, и вставьте код в вопрос. См. Также [Что-то на моем веб-сайте или проекте не работает. Могу ли я просто вставить ссылку на него?] (Http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste -a-link-to-it) – JJJ

+0

Я думаю, что проблема связана со страницей в целом не просто небольшим образцом с 3 div. – anonamas

ответ

0

Если вы удалите позицию абсолютной из нижнего колонтитула, вы будете в порядке, затем поместите верхний край 50px;

div.footer { 
    height: 70px; 
    width: 100%; 
    padding: 10px; 
    padding-left: 20px; 
    background: #F2F2F2; 
    border-top: 1px solid #ccc; 
    clear: both; 
    margin-top: 50px; 
} 
+0

Мне нужен нижний колонтитул, чтобы придерживаться дна. Размер страницы отличается. – anonamas

+0

Это поможет вам :) http://ryanfait.com/sticky-footer/ –

+0

Я действительно пробовал это. Это не работает. – anonamas

0

Поскольку футляр имеет абсолютное положение, он не будет «нажимать» html-контент дальше. Если вы добавите padding-bottom: 40px; до div.main {

Он будет выглядеть в полном порядке.

Это делает .main больше

div.main { 
width:800px; 
min-height:400px; 
margin-top:40px; 
padding-bottom: 40px; 
padding-left:20px; 
} 
3

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

Просто удалите абсолютное положение и добавьте некоторые поля. ;)

+0

Добавить несколько полей? Будет ли это действительно помогать, если размер страницы отличается от страницы к странице? – anonamas

+0

Да, потому что с относительным положением ваш нижний колонтитул просто перейдет под предыдущий div, соблюдая поток страниц. Узнайте немного больше о том, как div отображается в HTML-странице, потому что вы, кажется, неправильно поняли множество концепций. ;) Например: http://www.brainjar.com/css/positioning/ –

0

После проверки с помощью Firebug я обнаружил, что удаление «position: absolute» из класса div.footer в вашем CSS, решает проблему.

+0

Это не так, если размер страницы меньше. – anonamas

+0

Что вы видите сейчас? Нижний колонтитул не сдвинут в нижнюю часть страницы? Возможно, ответ выше о границах разъясняет это? –

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