Предотвращение фиксированного нижнего колонтитула от перекрывающегося содержимого

Я установил нижний колонтитул DIV в нижней части окна просмотра следующим образом:

#Footer
{
    position: fixed;
    bottom: 0;
}

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

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

Ответ 1

Современное решение "липкого нижнего колонтитула" будет использовать flexbox.

tl; dr:: установите контейнер (тело) на display:flex, а дочерний (нижний колонтитул) вы хотите перейти на margin-top:auto.

Сначала мы устанавливаем тело "изгибаем" его элементы по вертикали, следя за тем, чтобы он составлял 100% высоты.

Затем мы устанавливаем flex: 0 0 50px на элемент нижнего колонтитула, что означает: "не расти, не сжиматься и иметь высоту 50 пикселей". Фактически, мы могли бы полностью опустить атрибут flex и просто пойти с height:50px.

Мы можем установить display:flex на такие вещи, как <body> сам, несколько опрометчиво, потому что дети из контейнера flex имеют неявное значение flex: 0 1 auto, если опущено, которое (почти) эквивалентно flex:none (которое сокращение для flex:0 0 auto)

Это margin:auto дает нам то, что мы хотим. Применяемые в контейнере гибких дисков, автоматические поля приобретают новое значение, вместо обычного "получить равное количество свободного пространства" они означают "поглотить ВСЕ свободное свободное пространство".

Из спецификации (8.1. Выравнивание с автоматическими полями):

Перед выравниванием через justify-content и align-self, любой положительный свободное пространство распределяется по автоматическим полям в этом измерении.

Указано более просто:

Если вы применяете автоматические поля к элементу flex, этот элемент будет автоматически расширьте свой указанный запас, чтобы занять дополнительное пространство в flex Контейнер

Кроме того, подход "нормальный" flexbox будет, вероятно, состоять в том, чтобы согнуть средний отрезок ala <div id="main>...</div> до 100% по вертикали, что также сделает нижний колонтитул "прилипающим" к нижней части. Этот подход показывает, что гибкая модель коробки, на самом деле, достаточно гибкая, чтобы позволить нам изменять размер/перемещать изолированные элементы.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  background-color: #efefef;
  flex: 0 0 50px;/*or just height:50px;*/
  margin-top: auto;
}

<p>we've assumed only that there random space-taking content above the footer...</p>

<p>lorem ipsum dolor flex...</p>
<div>
  <p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>

Ответ 2

Проблема заключается в том, что позиция fixed выводит ее из потока документов. Вы можете добавить margin-bottom к содержимому тела, равному высоте #Footer. Это гарантирует, что всегда существует пустое пространство за нижним колонтитулом, равное его высоте, что предотвращает его перекрытие содержимого.

Ответ 3

Попробуйте настроить атрибут position на static

position: static;

Ответ 4

Это другое решение, которое я использую с помощью jQuery. Чтобы настроить его, вам не нужно много кода, и вам нужен только HTML.

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Your title</title>
	<link rel="stylesheet" href="#" onclick="location.href='https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'; return false;">
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
	<div data-role="page">
		<div data-role="header" data-position="fixed">
			<h1>Your Header</h1>
		</div>
		<div data-role="main" class="ui-content">
			<p style="font-size: 300%;">
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        
      </p>
		</div>
		<div data-role="footer" data-position="fixed">
			<h1>Your Footer</h1>
		</div>
	</div>
</body>
</html>