Прокрутка CSS как для элемента html, так и для фиксированного элемента с минимальной шириной

Попробуйте следующий код:

<!DOCTYPE html>
<html style="min-width:600px; overflow:auto;">
        <body style="background:grey; padding:0px; margin:0px;">
                <div style="text-align:right;">
                     this is some text
                </div>
            <div id="footer" style="
                    background:yellow;
                    position:fixed;
                    height: 100px;
                    width:100%;
                    min-width: 600px;
                    text-align:right;
                    bottom:0px;
                    ">
                    footer text
            </div>
        </body>
</html>

Поэтому, когда я делаю ширину окна браузера менее 600 пикселей, горизонтальная полоса прокрутки появляется внизу окна, как и ожидалось. Когда я прокручиваю вправо, фраза «это какой-то текст» прокручивается в поле зрения, и это здорово. Однако фраза «текст нижнего колонтитула» не прокручивается, что является проблемой.

Как сделать так, чтобы «текст нижнего колонтитула» и «это какой-то текст» прокручивались в поле зрения, когда я перетаскиваю полосу прокрутки окна вправо? Желтый нижний колонтитул всегда должен отображаться внизу сайта.

Я бы предпочел чистое решение CSS для этого. Я приму решение javascript, если это абсолютно необходимо.

Спасибо


css position fixed
person John    schedule 14.02.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это связано с тем, что для fixed элементов содержащий блок является не элементом en, а областью просмотра (см. http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning)

Вам следует попробовать метод, описанный здесь, который использует absolute позиционирование: http://alistapart.com/article/footers

ОП говорит:
Спасибо. Я использовал jquery, выполнив $(window).scroll(function(){$('#footer').css('left', parseInt(-1*$(window).scrollLeft();)+'px');}); Думаю, это было достаточно просто

person MatTheCat    schedule 14.02.2013
comment
Я просмотрела все примеры сайта alistapart.com. Когда я уменьшаю окно до 30 на 30 пикселей, нижний колонтитул больше не отображается. Мне нужно вертикально прокрутить вниз, чтобы увидеть нижний колонтитул. Как сделать так, чтобы нижний колонтитул всегда был виден в нижней части окна, а не в нижней части веб-страницы? - person John; 14.02.2013
comment
Боюсь, вам придется использовать JavaScript для достижения точного поведения. - person MatTheCat; 14.02.2013
comment
Спасибо. Я использовал jquery, выполнив $(window).scroll(function(){$('#footer').css('left', parseInt(-1*$(window).scrollLeft();)+'px');}); Думаю, это было достаточно просто - person John; 14.02.2013

arrow_upward
0
arrow_downward

Выньте минимальную ширину на втором div. Это позволит тексту нижнего колонтитула всегда отображаться независимо от размера области просмотра.

person MGDTech    schedule 14.02.2013
comment
мне нужно было добавить минимальную ширину, потому что я планирую иметь МНОГО плавающих элементов внутри нижнего колонтитула. Элементы должны занимать не менее 600 пикселей. если нижний колонтитул становится меньше 600 пикселей, все смещается. - person John; 14.02.2013