использование переполнения css вызывает странное поведение - PullRequest
Новая
       0

использование переполнения css вызывает странное поведение

1 голос
/ 07 августа 2011

У меня есть этот сайт .

Я установил нижний колонтитул с position fixed с определенными height и width из 100% иleft:0px и bottom:0px.

Содержимое над нижним колонтитулом блокируется за нижним колонтитулом, когда я изменяю размер браузера, даже если у меня есть overflow:auto над элементом div над ним.

Вотснимок экрана при изменении размера браузера и блокировке содержимого.

http://i.imgur.com/EtQDp.png

Ответы [ 5 ]

3 голосов
/ 07 августа 2011

Вы можете исправить это, задав для вашей обертки нижнее поле, равное высоте + отступу нижнего колонтитула, поэтому в этом случае: 

#wrapper {
    margin-bottom: 213px;
    overflow: auto;
}

Объяснение состоит в том, что когда вы размещаете что-то с помощью position:fixed, вы удаляете его из потока документа так же, как и с position:absolute (фиксированная разница заключается в том, что ваш контент будет прикреплен к окну просмотра, а не к документ и так прокручивать не буду). Это означает, что на нормально размещенный контент он не влияет, и действует так, как будто его там нет.

В вашем случае ваш div-обертка использовал все доступное пространство, включая пространство, которое было за вашим нижним колонтитулом. Добавляя поле в конец обертки, вы фактически останавливаете его в начале нижнего колонтитула, и, если требуется больше места, будет отображаться полоса прокрутки.

1 голос
/ 07 августа 2011

Вы, вероятно, хотите что-то вроде этого: 

<body>
  <div id="page">
    <div id="logo">...</div>
    <div id="head">...</div>
    <div id="wrapper">...</div>
    <div id="footerSpacer"></div>
    <div id="footer">...</div>
  </div>
</body>

А затем файл CSS: 

html, body {
    height: 100%;
}
page {
    min-height: 100%;
    position: relative;
}
footerSpacer {
    height: 200px;
}
footer {
    position: absolute;
    bottom: 0;
    height: 200px;
}

Таким образом, нижний колонтитул находится в нормальном месте потока страниц, если страница длинная,Однако, если страница короче высоты окна, она останется внизу окна.

0 голосов
/ 07 августа 2011

не могли бы вы поместить div между body div и нижним колонтитулом, а затем добавить к нему класс clear: both;

0 голосов
/ 07 августа 2011

Вам нужен нижний колонтитул position:fixed;, если он все равно идет прямо ко дну? Почему бы просто не сделать position:absolute;? Либо так, либо опустите z-index нижнего колонтитула, чтобы он отставал от содержимого.

0 голосов
/ 07 августа 2011

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

Для того, что вы хотите сделать, вы должны плавать содержимое вашей страницы и применить clear: both к CSS вашего нижнего колонтитула, что заставит его очистить как правый и левый всплывающие элементы и принудительно его книз.Позиционирование с фиксированным или абсолютным значением позволит скрыть другие элементы за нижним колонтитулом.

Другой подход заключается в использовании position: absolute вместо position: fixed, чтобы приклеить нижний колонтитул к нижней части страницы, а затем обернуть основнойсодержимое в <div> и задайте для него нижнее поле, равное высоте нижнего колонтитула.

С другой стороны, рекомендуется использовать строчные символы при объявлении тегов html и добавлении атрибутов;Я заметил, что у вас было довольно много в верхнем регистре.Также обычно рекомендуется выгрузить css и javascript во внешние файлы, а затем импортировать их с <link rel="stylesheet" type="text/css" src="path_to_css_file_from_html_file_location"> и <script src="path_to_javascript_file_from_html_file_location" > соответственно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...