нижний колонтитул в нижней части области просмотра без перекрытия с содержимым

Мне нужен очень простой макет, состоящий только из двух основных частей: содержимого и нижнего колонтитула. Нижний колонтитул всегда должен быть внизу окна просмотра. Так что я:

  • Содержание (позиция: относительная)
  • Нижний колонтитул (позиция: фиксированная; нижняя часть: 0 пикселей). Это работает, когда у меня мало контента (см. изображение 1).

Проблема начинается, когда окно просмотра слишком короткое или содержит много контента (см. изображение 2).

Содержимое располагается за нижним колонтитулом (перекрывается), и появляется прокрутка страницы.

Я тоже не хочу, чтобы он был впереди. Мне бы хотелось вот этого (см. изображение 3)

Содержимое не перекрывается с нижним колонтитулом, а прокрутка страницы прокручивает только блок содержимого.

Я не знаю, как это сделать и даже можно ли это сделать. Я не против использования jquery, и мне все равно на ie6. Любая помощь будет очень признательна

Спасибо

ИЗМЕНИТЬ:

Спасибо за ответ.

Я загружаю пару изображений, чтобы вы могли лучше понять, что мне нужно.

На изображении 1 http://estudioibarra.com/test/image1.jpg вы можете увидеть дизайн Я хочу, и на изображении 2 http://estudioibarra.com/test/image2.jpg есть то же изображение с некоторыми пояснениями.

Я хочу, чтобы заголовок всегда был внизу области просмотра, потому что это мое меню. И я не хочу, чтобы содержимое пересекалось с моим меню. потому что контент будет иметь более 3 проектов.

Чего я не хочу, так это http://estudioibarra.com/test/image3.jpg (содержимое отображается за меню).

С некоторыми из ваших решений я могу это решить, но только если у меня есть прокрутка в контейнере div. Мне действительно это не нравится.

Можно ли использовать прокрутку главной страницы для прокрутки содержимого контейнера??

Еще раз спасибо за ваше время


jquery css css-position footer overlapping
person Gonzalo    schedule 25.03.2011    source источник
comment
@rsplak: см. изображение. Все 3 изображения находятся внутри него.   -  person thirtydot    schedule 26.03.2011
comment
@thirtydot, да, ты прав   -  person    schedule 26.03.2011

Ответы (3)


arrow_upward
4
arrow_downward

Как насчет того, чтобы просто создать содержимое и нижний колонтитул position: fixed и разместить их как угодно, как в этом примере: http://jsfiddle.net/bAtVE/?

#content {
    position: fixed;
    height: 85%;
    width: 95%;
    border: 1px blue solid;
    overflow-y: auto;
}

#footer {
    position: fixed;
    height: 10%;
    width: 95%;
    bottom: 0;
    border: 1px red solid;
}

<div id="content">
    here is content
</div>
<div id="footer">
    This is footer
</div>

ИЗМЕНИТЬ:

На этот раз я использовал position: absolute (см. http://jsfiddle.net/bAtVE/1/). Вероятно, это лучшая практика, так как позиция fixed не так совместима с разными браузерами.

#content {
    position: absolute;
    top: 0;
    left: 0;
    height: 85%;
    width: 100%;
    overflow-y: auto;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 100%;
}

EDIT2:

http://jsfiddle.net/bAtVE/2/

person William Niu    schedule 25.03.2011
comment
Прежде всего спасибо за ваш ответ. Проблема, с которой я столкнулся с вашим решением, заключается в том, что прокрутка появляется только в div содержимого. Я думал об этом решении, но я не использовал его по этой причине. Я хочу использовать прокрутку страницы для прокрутки только содержимого в div контента. Это вообще возможно? Спасибо - person Gonzalo; 28.03.2011
comment
Все, что вам нужно сделать, это немного пересмотреть CSS, чтобы сделать (выглядеть) именно то, что вы хотите. См. пересмотренный CSS. - person William Niu; 28.03.2011
comment
Я добавил новые изображения в новый вопрос, чтобы вы могли видеть именно то, что мне нужно. Спасибо за вашу помощь - person Gonzalo; 31.03.2011
comment
гм.... если вам действительно нужна полоса прокрутки сбоку, вы можете просто fix нижний колонтитул внизу и оставить немного места внизу #content. По-прежнему есть перекрытия, но когда пользователь прокручивает страницу вниз, он все равно может видеть весь контент. См. исправленное решение. - person William Niu; 31.03.2011
comment
Спасибо за ответ. Но я пытаюсь избежать наложения из-за полупрозрачного нижнего колонтитула (см. изображение 3 в моем последнем посте). Кажется, что то, что я хочу, не может быть сделано, поэтому мне придется довольствоваться тем, что прокрутка находится только в div контента. Спасибо, в любом случае - person Gonzalo; 24.04.2011

arrow_upward
1
arrow_downward

В приведенном ниже примере нижний колонтитул останется фиксированным, даже если у вас есть переполнение содержимого в родительском элементе. Размеры контейнера могут быть динамическими, и ширина нижнего колонтитула будет изменяться соответствующим образом. Нижний колонтитул зависит от контейнера, а не от окна браузера, в отличие от position:fixed. С помощью jQuery вы можете:

var cw = $('#container').innerWidth();

$('#header').css({
    'width': cw + "px"
});

$('#container').scroll(function() {
    $('#header').css({
        'bottom': -$('#container').scrollTop()
    })
})

Проверьте рабочий пример на http://jsfiddle.net/M2n8Q/.

person Hussein    schedule 25.03.2011
comment
Спасибо за ответ. Проблема в том, что содержимое отображается за заголовком. И я не хочу этого, потому что мой заголовок непрозрачный, поэтому вы можете видеть содержимое за ним. - person Gonzalo; 28.03.2011
comment
Решение простое. оберните содержимое с помощью div и расположите его на 30 пикселей снизу. Проверьте обновленное решение на jsfiddle.net/M2n8Q/3. - person Hussein; 28.03.2011
comment
Я добавил новые изображения в новый вопрос, чтобы вы могли видеть именно то, что мне нужно. Спасибо за вашу помощь - person Gonzalo; 31.03.2011

arrow_upward
1
arrow_downward

Как насчет того, чтобы просто зафиксировать нижний колонтитул внизу и придать ему border-top тот же цвет, что и фон?

body { background:#eeeeed; }
#wrap { width:34em; margin:0 auto; }
#head, #foot { padding:1em 2em; }
#head, #main { background:#fff; }
#main { padding:0 2em 6em; }
#foot {
    bottom:0;
    color:#fff;
    width:30em;
    position:fixed;
    background:#444;
    text-align:center;
    border-top:1em solid #eeeeed;
}

Демонстрация: jsfiddle.net/Marcel/xgafM

person Marcel    schedule 26.03.2011
comment
Спасибо за ответ. Но я не могу этого сделать, потому что фон страницы представляет собой случайный выбор изображений. - person Gonzalo; 28.03.2011