Белый зазор под нижним колонтитулом

On my site here, мы используем тот же CSS для разных городов, но у non populated/new towns e.g. here без содержания есть нижний колонтитул, поднимающийся вверх и оставляющий большой белый промежуток под ним.Белый зазор под нижним колонтитулом

Я пробовал sticky footer method, который не работал.

Вот сноска CSS:

#footer-wrapper, #push { 
    height: 100px; /* .push must be the same height as .footer */ 
     overflow:hidden; 
} 
#footer-wrapper {clear:both;width:100%;border-top:1px solid #323232;padding:20px 0 0; 
background: #33383c; 
background: #3F4952 url("/images/bg.jpg") repeat; 
}

Contentwrapper:

#main-content { 
margin: 0 5% -100px; 
min-width:960px; 
max-width:1137px; 
overflow: hidden; 
}

И мне интересно, если правый/левый нав равно столбец CSS влияет на ее, например:

.right-nav { 
float: right; 
width: 29.4%; 
border-left: 1px solid #Dddddd; 
padding-top:2em; 
padding-bottom:10040px; 
margin-bottom:-10000px; 
}

Любые идеи были бы замечательными.

источник

2013-05-13 Anonymous

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Посмотрите на эту ссылку. Я на 100% уверен, что это исправит это для вас. Отличный учебник, и это очень помогло мне понять, как это работает! – DiederikEEn

@DiederikEEn Я бы не рекомендовал использовать абсолютное позиционирование, поскольку он не является надежным кросс-браузером и кросс-OS – imulsion

@imulsion хорошо, пока вы используете ширину 100% для нижнего колонтитула там не будет большой проблемой. Но я согласен с тобой – DiederikEEn

Я установил его min-height:100% на #main-content.

Height:100% отрезает конец страницы на заполненных страницах, тогда как min-height:100% работает на обоих.

источник

2013-05-13 19:09:17

Положите min-height на #main-content div, чтобы пропустить нижний колонтитул, даже если #main-content div не имеет содержимого.

#main-content { 
    margin: 0 5% -100px; 
    min-width:960px; 
    max-width:1137px; 
    min-height:600px; 
    overflow: hidden; 
}

ИЛИ

Добавить position:absolute; в #footer-wrapper DIV, чтобы вытащить его на дно 100% высоты body тега.

источник

2013-05-13 14:36:44

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

Это не ошибка, а просто способ CSS работает. Ваш контентный div слишком короткий, чтобы подтолкнуть нижний колонтитул до нижней части окна. Это способ сделать нижний колонтитул в нижней части страницы независимо от высоты вашего контента. –

Я исправил его, добавив min-height: 100% в # основной контент div согласно моему ответу выше. –

Я установил его, добавив height:100%; в #main-content.

Не знаю, почему я не понял этого раньше, но спасибо за ответы.

источник

2013-05-13 19:03:28

Белый зазор под нижним колонтитулом

ответ

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