Этот нижний колонтитул остается в Chrome, как я могу сделать так, чтобы он оставался неизменным в Firefox

ProgramBox

Этот нижний колонтитул остается в Chrome, как я могу сделать так, чтобы он оставался неизменным в Firefox

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#css #footer

#css #нижний колонтитул

Вопрос:

Этот нижний колонтитул остается в Chrome, как я могу переписать HTML или CSS, чтобы он оставался неизменным в Firefox?

Например, когда я захожу на страницу в Chrome, а затем уменьшаю масштаб, нижний колонтитул остается внизу экрана, но когда я захожу на ту же страницу в Firefox и пытаюсь уменьшить масштаб, нижний колонтитул не остается в нужном месте.

Вы поймете, что я имею в виду, если попробуете зайти на страницу.

Кто-нибудь знает?

С уважением

Pongy

1. что вы подразумеваете под «уменьшением масштаба»? Моя первая мысль была как на мобильном телефоне, но поскольку у мобильных телефонов нет таких браузеров, как Firefox и Chrome, я был в тупике. Я попытался просмотреть страницу в Chrome и Firefox (4), и она отображается в одном и том же месте для обоих. Я попытался удерживать CTRL и прокручивать колесико мыши вниз, чтобы добиться некоторого увеличения текста, и он по-прежнему отображается в одном и том же месте в обоих браузерах.

2. Ну, в Firefox и IE нижний колонтитул увеличивается, если вы достаточно уменьшаете масштаб, но в Chrome он остается внизу, чего я и пытаюсь добиться для всех браузеров.

3. Я бы поэкспериментировал. Для меня, когда я достаточно уменьшаю масштаб в Chrome, это происходит в любом случае. Почему вы пытаетесь предотвратить это?

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

Ответ №1:

Ваша проблема прямо здесь, в вашем коде.

 #footer {
    height:40px;
    position:absolute;
    overflow:hidden;
    background:url(images/bottombar.png) repeat-x 0 0;
    position:relative;
    margin-top:400px;
}

Как вы можете видеть, вы указали, что он должен быть абсолютным и относительным, поэтому вы дублируете код без причины, а верхний колонтитул — 400 пикселей; поэтому, независимо от того, насколько вы увеличиваете или уменьшаете масштаб, вы явно указали, что он должен оставаться в этой позиции. Принимая во внимание, что у вас должен быть следующий код:

 #footer {
    height:40px;
    position:absolute;
    overflow:hidden;
    background:url(images/bottombar.png) repeat-x 0 0;
    top:100%;
    margin-top:-40px;
}

Итак, теперь мы говорим, что он должен располагаться сверху, вниз к нижней части страницы, с высотой 40 пикселей, поэтому теперь мы показываем его за пределами самого документа, поэтому затем мы возвращаем его на место, что соответствует 40 пикселям высоты, которую мы назначили.#

1. Извините, это вообще не сработало. Посмотрите сами, нижний колонтитул почти исчез — он уменьшился в размере и прилип к левой части экрана.

2. Да, это сделало то, что должно было сделать, с absolute нет ссылок на ширину и высоту, поэтому, если вы их не укажете, они просто наследуются, поэтому, если мы добавим display: block; или width: 100%;, это исправит вашу проблему с шириной.

3. Хорошо, применил строку width: 100%, в результате чего нижний колонтитул теперь не прилипает к низу ни в Chrome, ни в Firefox. Т. Е. вместо того, чтобы нижний колонтитул прилипал к низу в Firefox, как это было в Chrome, теперь он не будет прилипать к низу в Chrome, точно так же, как этого не было в Firefox.

4. Последнее, что нужно сделать, это в вашем теге body в CSS избавиться от position: relative и все в порядке. 🙂

5. Это сработало, но теперь нижний колонтитул перекрывает текст при увеличении?