Сохранение нижнего колонтитула в нижней части окна на сайте, который прокручивается горизонтально

Question

У меня полностью горизонтальная прокрутка,

TopNav (фиксированная позиция)

Nav (фиксированная позиция)

Содержание (боковая прокрутка)

Нижний колонтитул (фиксированное положение)

Кажется, все работает отлично, но проблема в том, что если контент достаточно большой для горизонтальной прокрутки, он помещает нижний колонтитул за горизонтальную полосу прокрутки, поэтому на нескольких страницах я сделал #footer {bottom: 16px} или около того, чтобы учитывать горизонтальную полосу прокрутки, находящуюся там.

У меня проблемы с различными разрешениями монитора. Очевидно, что содержимое будет прокручиваться горизонтально или не в зависимости от размера окна. Есть ли способ сохранить нижний колонтитул внизу (или над горизонтальной полосой прокрутки)? Неважно, какое разрешение или размер окна?

Answer 1

После долгих проб и ошибок я обнаружил, что это лучшее решение для всегда нижнего колонтитула:

HTML:

<div class="footer">

    <div class="footer_contents"></div>

</div>

CSS:

.footer {

    height:24px; // Replace with the height your footer should be
    width: 100%; // Don't change
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    position: fixed;
    bottom: 0pt;
    left: 0pt;

}   

.footer_contents {

    height:24px; // Replace with the height your footer should be
    width: 1000px; // Visible width of footer
    margin:auto;

}

Answer 2

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}

И одно простое правило CSS для IE 6 и IE 5.5:

#container {
    height:100%;
}

Answer 3

Моя лучшая идея - иметь широкий контент как часть собственного прокручиваемого div.Нижний колонтитул останется на своем месте в нижней части содержимого, кажется, всегда в центре.

Если вы хотите, чтобы полосы прокрутки не были выше нижнего колонтитула, вы, вероятно, можете сделать что-то причудливое с div инекоторые CSS, например, поместите пустой div размером с нижний колонтитул ниже широкого содержимого и сделайте так, чтобы у настоящего нижнего колонтитула был верх: - (высота нижнего колонтитула)

Answer 4

Я вижу две возможности:

1-й вариант Заставить тело показывать полосу прокрутки всегда.Но это может выглядеть странно.

body { overflow-x: scroll; }

2-й вариант Контейнер с содержимым всегда должен находиться над нижним колонтитулом.это возможно, если ваш нижний колонтитул имеет фиксированную высоту.Тогда у вас будет полоса прокрутки над нижним колонтитулом.

<div id="contentWrapper">
    <div id="content">Here comes your content</div>
</div>

А здесь CSS, который я сейчас объясню

body, html {
    height: 100%;
    overflow: hidden;
}

#contentWrapper {
    overflow-x:auto;
    overflow-y: hidden;
    height: 100%;
    margin-top: -16px; // add the footer height
}

#content {
    padding-top: 16px; // add the footer height
    width: 6000px;
}

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