предотвращать перемещение нижнего колонтитула при вертикальном изменении окна

Как вы прикрепляете нижний колонтитул к нижней части страницы и не перемещаете ее вверх, а окно изменяется вертикально? Нижний колонтитул должен исчезать, когда окно становится меньше по высоте.предотвращать перемещение нижнего колонтитула при вертикальном изменении окна

Это видео показывает, как перемещается нижний колонтитул: https://vid.me/Lqk6.

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

Мой код колонтитула до сих пор:

#footer{ 
 
    bottom: 0px; 
 
    position:fixed; 
 
    height:50px; 
 
    left: 0px; 
 
    right:0px; 
 
    margin-bottom:0px; 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 

 
} 
 
#wrapper{ 
 
    height: 1000px; 
 
} 
 

 
html,body { 
 
    height: 100%; 
 
}

<body> 
 
\t <div id="wrapper"> 
 
\t \t <div id="footer">Footer</div> 
 
\t </div> 
 
</body>

источник

2016-10-08 sanjihan

Что именно «приклеивает нижний колонтитул к нижней части страницы и удерживает ее от перемещения вверх»? Под всем содержимым, как обычно? Или сначала разместите его у окна, а потом проигнорируйте окно? Очевидно, что он придерживается нижней части окна просмотра, поскольку вы указываете «position: fixed», но что именно вы ожидаете? – Roope

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

[https://jsfiddle.net/tjbaezid/20pu9yvg/] можете ли вы объяснить мне, где проблема? –

Sarmad Aijaz правильно - фиксированное позиционирование вызывает проблему. Я думаю, что это будет решать это для вас:

#footer { 
 
    bottom: 0px; 
 
    position: absolute; 
 
    height: 50px; 
 
    left: 0px; 
 
    right: 0px; 
 
    margin-bottom: 0px; 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
#wrapper { 
 
    height: 1000px; 
 
    position: relative; 
 
} 
 

 
html,body { 
 
    height: 100 % ; 
 
}

<body> 
 
<div id="wrapper"> 
 
    <div id="footer">Footer</div> 
 
</div> 
 
</body>

Устанавливая #wrapper к position: relative;, мы гарантируем, что #footer абсолютное позиционирование будет относительно #wrapper (как это первый, не статически позиционный родительский элемент). Если вы предпочитаете, чтобы это относилось к документу, просто опустите относительное позиционирование в элементе #wrapper.

источник

2016-10-08 20:22:38

Это происходит потому, что ваша позиция фиксируется в #footer ... вы можете изменить его на absolute или relative

источник

2016-10-08 20:17:37

Если вы хотите сохранить нижний колонтитул внизу текста (липкий нижний колонтитул), но держите его всегда в нижней части экрана, вы можете использовать: position: relative; (поддерживает нижний колонтитул по отношению к содержимому страница, а не порт представления) и clear: both; (будет удерживать нижний колонтитул от другого содержимого).

источник

2016-10-08 20:27:01

Это решение зависит от того, какой ресулион устройства пользователя. Вы можете настроить его, используя атрибут @media.

Acordding на устройство, я изменил ВОЛП ך благодаря 2 линии, и она работала, как вы хотите:

топ: 580px; позиция: относительная;

источник

2016-10-08 20:40:23 idan

предотвращать перемещение нижнего колонтитула при вертикальном изменении окна

ответ

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