Подвал (footer), всегда прижатый к низу страницы - Веб программирование

Пытаюсь средствами HTML/CSS (без JS/PHP) сделать подвал (footer), который всегда внизу страницы, независимо от ее высоты. То есть, высота страницы меньше высоты окна браузера, подвал прижимался книзу, а в остальных случаях помещался сразу после основного содержимого.

Пересмотрел кучу рецептов, но подвал или не перемещается при прокрутке, и всегда отображается в нижней части окна (такого мне не нужно), или налезает на текст, когда высота страницы больше высоты окна, или не прижимается книзу, если высота меньше. Вдобавок, большинство рецептов выглядит откровенно по-шамански, в стиле "у меня получилось вот так, а почему — сам не знаю".

Есть ли надежный способ это оформить для большинства современных браузеров? И нужно ли непременно заворачивать основной текст страницы в свой собственный div, или достаточно завернуть только подвал, а нужные свойства определить для html/body?

Я такой вариант использую. Подразумевает футер фиксированной высоты.

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}
body {
  margin: 0;
}
#body-wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
#footer, #footer-push {
  height: 50px;
}
</style>
</head>
<body>
  <div id=body-wrapper>
    <div id=body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum.
    </div>
    <div id=footer-push></div>
  </div>
  <div id=footer>
    Footer
  </div>
</body>
</html>

Здравствуйте, vsb, Вы писали:

vsb>Я такой вариант использую.

Видел и такое, но и тут тоже шаманство с body/body-wrapper/footer-push. Для чего нужны body-wrapper и body, если те же атрибуты можно привязать к тегам html и body? Для чего нужен footer-push?

Здравствуйте, Евгений Музыченко, Вы писали:

vsb>>Я такой вариант использую.

ЕМ>Видел и такое, но и тут тоже шаманство с body/body-wrapper/footer-push.

Почему шаманство?

EM> Для чего нужны body-wrapper и body, если те же атрибуты можно привязать к тегам html и body?

#footer должен быть на одном уровне вложенности с #body-wrapper. Если бы можно было добавить #footer после </body>, можно было бы так сделать.

EM> Для чего нужен footer-push?

Чтобы #footer не налезал на #body при прокрутке. Удали — увидишь.

Вот более простой вариант, но требует поддержки calc.

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}
body {
  margin: 0;
}
#body {
  min-height: calc(100% - 50px);
}
#footer {
  height: 50px;
}
</style>
</head>
<body>
  <div id=body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum.
  </div>
  <div id=footer>
    Footer
  </div>
</body>
</html>

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Есть ли надежный способ это оформить для большинства современных браузеров? И нужно ли непременно заворачивать основной текст страницы в свой собственный div, или достаточно завернуть только подвал, а нужные свойства определить для html/body?

<html>
    <head>
        <title>Test</title>
        <style>

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

main { flex: 1; background:gold; }

        </style>
    </head>
    <body>
       <header>h</header>
       <main>m</main>
       <footer>f</footer>
    </body>
</html>

То же самое но в Sciter:

<html>
    <head>
        <title>Test</title>
        <style>

main { size:*; background:gold; }

        </style>
    </head>
    <body>
       <header>h</header>
       <main>m</main>
       <footer>f</footer>
    </body>
</html>

Здравствуйте, vsb, Вы писали:

vsb>Почему шаманство?

Потому, что требуется отрицательный margin-bottom, а если приписать footer'у более правильные атрибуты position:absolute и bottom:0, то эффекта не получается.

vsb>#footer должен быть на одном уровне вложенности с #body-wrapper.

Зачем тогда нужен отдельный div body?

EM>> Для чего нужен footer-push?
vsb>Чтобы #footer не налезал на #body при прокрутке. Удали — увидишь.

А в чем смысл-то, ежели он пустой? Получается, еще один странный хак?

Здравствуйте, c-smile, Вы писали:

CS>

CS>body { display:flex; min-height:100vh; flex-direction: column; margin:0; }
CS>

С flex вроде получается лучше. Жаль, он плохо поддерживается в Opera 12, хотя последняя версия выпущена аж в 2016-м.

Здравствуйте, Евгений Музыченко, Вы писали:

vsb>>Почему шаманство?

ЕМ>Потому, что требуется отрицательный margin-bottom

Ну в отрицательном margin-bottom ничего такого нет. Может быть необычно, но это вполне стандартный приём. Означает, что следующий элемент надо сдвинуть вверх, внахлёст с текущим.

EM> а если приписать footer'у более правильные атрибуты position:absolute и bottom:0, то эффекта не получается.

Думаю можно и так сделать, но всё будет куда более запутанно.

vsb>>#footer должен быть на одном уровне вложенности с #body-wrapper.

ЕМ>Зачем тогда нужен отдельный div body?

Не нужен, просто для наглядности. Вместо него можно писать что угодно.

EM>>> Для чего нужен footer-push?
vsb>>Чтобы #footer не налезал на #body при прокрутке. Удали — увидишь.

ЕМ>А в чем смысл-то, ежели он пустой? Получается, еще один странный хак?

Смысл в том, чтобы #body-wrapper был на 50 пикселей выше и в нём было пустое место, которое заполнится футером, сдвинутым наверх с помощью отрицательного маргина.

Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Здравствуйте, c-smile, Вы писали:

CS>>

CS>>body { display:flex; min-height:100vh; flex-direction: column; margin:0; }
CS>>

ЕМ>С flex вроде получается лучше. Жаль, он плохо поддерживается в Opera 12, хотя последняя версия выпущена аж в 2016-м.

Ну тут одно из двух, или "для большинства современных браузеров" или для Opera 12.

Для Opera 12 и вообще всех существующих когда-либо browser:

<table width="100%" height="100%">
  <tr><td class="header">…</td></tr>
  <tr><td class="main" height="100%">…</td></tr>
  <tr><td class="footer" >…</td></tr>
</table>

причем height="100%" должны быть заданы именно ДОМ атрибутами, а не CSS ибо к процентам в CSS они отношения не имеют.

От:	Евгений Музыченко	https://software.muzychenko.net/ru
Дата:	18.11.18 12:06
Оценка:

	От:	vsb
	Дата:	18.11.18 14:17
	Оценка:	8 (1)

От:	Евгений Музыченко	https://software.muzychenko.net/ru
Дата:	18.11.18 14:21
Оценка:

	От:	vsb
	Дата:	18.11.18 14:25
	Оценка:

	От:	vsb
	Дата:	18.11.18 14:35
	Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	18.11.18 15:28
Оценка:	82 (3) +2