Липкий нижний колонтитул работает неправильно

-2

Я пытаюсь внедрить липкий нижний колонтитул на свой сайт, но по какой-то причине он не хочет работать, и его толкнул больше, чем нужно. Я пробовал много «липких нижних колонтитулов», но всегда есть что-то не работающее.Липкий нижний колонтитул работает неправильно

Пожалуйста, проверьте мою скрипку: http://jsfiddle.net/Qx5Fz/1/

html, body { 
    height: 100%; 
} 

#content { 
    min-height: 100%; 
} 

#main { 
    overflow:auto; 
    padding-bottom: 40px; 
} 

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

источник

2013-11-27 Richard Mišenčík

Up дано для перекрытия боковой панели: http://jsfiddle.net/Qx5Fz/12/

Проблема, с которой вы сталкиваетесь, заключается в использовании position: fixed; height: 100%; на боковой панели. Это приводит к тому, что боковая панель будет на 100% от окна, что всегда будет подталкивать ваш нижний колонтитул вниз, когда он должен находиться в нижней части окна.

Я использую липкий колонтитул здесь: Sticky footer + textarea height in percentage (источник: http://css-tricks.com/snippets/css/sticky-footer/)

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

html, body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 
#wrap { 
    height:100%; 
    margin: 0; 
} 
#wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -100px; 
} 
#wrap:after { 
    content: ""; 
    display: block; 
} 
#footer, #wrap:after { 
    /* .push must be the same height as footer */ 
    height: 100px; 
}

Я добавил top: 0 на боковой панели.

источник

2013-11-27 22:50:28 brouxhaha

Но боковая панель, как предполагается, перекрывается, я бы так не сделал это сам, но был разработан таким образом. –

Я обновил ответ, чтобы все еще совместить его, но не нажимать нижний колонтитул. – brouxhaha

Спасибо, что, кажется, отлично работает, надеюсь, что у него будет возможность воссоздать его локально. Еще одна вещь, вы можете заметить, что при изменении размера окна вниз основной текст переключается влево и его под боковой панелью. Я знаю, что это постоянное положение в фиксированной позиции, оно должно быть исправлено, просто изменив posiiton на статическое право? –

попробовать

#footer { position: fixed; }

вместо относительной

источник

2013-11-27 22:21:35 CRABOLO

Я бы хотел, чтобы он просто застрял на дне, а не фиксировался. Если нет другого пути, я буду использовать исправление. –

попробовать это: http://jsfiddle.net/Qx5Fz/8/

#footer { 
    position: fixed; 
    height: 40px; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: 999; 
}

источник

2013-11-27 22:27:28

Липкий нижний колонтитул работает неправильно

ответ

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