0

Есть ли какая-нибудь возможность прикрепить футер к низу страницы, не изменяя разметку контейнера и мейна.

На данный момент пробовал все что умею и знаю:

  1. менял позицию футера на relative, absolute, fixed. Последнее свойство помогает, но я не хочу видеть футер всегда. Только в внизу, после последнего контейнера.
  2. перетаскивал футер за пределы мейна и обратно. Тоже без особого результата.

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat|Nunito+Sans|Roboto&display=swap');
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  word-wrap: break-word;
}

html,
body,
header,
main {
  height: 100%;
}

body {
  width: 100%;
  font-family: Roboto, Verdana, sans-serif;
  font-size: 1em;
  background-image: url(../images/extra_clean_paper.png);
  background-repeat: repeat;
}

header {
  text-align: center;
  background-color: yellow;
}

#hero-header {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#nav {
  text-align: center;
  background-color: dimgray;
  z-index: 2;
}

main:not {
  max-width: 960px;
  margin: 0 auto;
}

.container {
  background-color: #eeeeee;
  border: 1px solid red;
  border-radius: 5px;
  clear: both;
  overflow: hidden;
  margin-top: 1em;
  min-height: 100%;
  padding: 3.125em 0.625em;
  -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
}

.aboutme .col-40 {
  margin-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  width: 39%;
}

.aboutme .col-60 {
  margin-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  width: 59%;
}

.left {
  float: left;
}

.right {
  float: right;
}

.table {
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
}

.hobbies .table-row {
  display: table-row;
  border-bottom: 0.1em solid darkgrey;
}

.hobbies .table-row:last-child {
  border: 0;
}

.hobbies .table-cell {
  display: table-cell;
  padding-left: 1em;
  padding-right: 1em;
  vertical-align: middle;
  text-align: center;
  width: 50%;
}

.portfolio .col-50 {
  margin-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  width: 49%;
}

.projects .flex-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.projects .col-33 {
  position: relative;
  width: 100%;
  max-width: 33%;
  -ms-flex: 0 0 33%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33%;
  flex: 0 0 33%;
}

.projects .services-box {
  background: #f9f9f9;
  padding: 10px;
  margin: 20px 5px 0 5px;
}

footer {
  background: red;
  height: 50px;
  width: 100%;
  position: relative;
  bottom: 0;
}
<header id="link-hero-page">
  <div id="hero-header">
  </div>
</header>
<nav>
  <ul id="nav">
  </ul>
</nav>
<main>
  <section id="link-main" class="aboutme container">
    <div class="col-40 left">
    </div>
    <article class="col-60 right">
    </article>
  </section>
  <section id="link-hobbies" class="hobbies container">
    <div class="table">
      <div class="table-row">
        <article class="table-cell">
        </article>
      </div>
      <div class="table-row">
        <div class="table-cell">
        </div>
        <article class="table-cell">
        </article>
      </div>
      <div class="table-row">
        <article class="table-cell">
        </article>
      </div>
    </div>
  </section>
  <section id="link-portfolio" class="portfolio container">
    <article class="col-50 left">
    </article>
    <article class="col-50 right">
    </article>
  </section>
  <section id="link-projects" class="projects container">
    <div class="flex-row">
      <div class="col-33">
        <article class="services-box">
        </article>
      </div>
      <div class="col-33">
        <article class="services-box">
        </article>
      </div>
      <div class="col-33">
        <article class="services-box">
        </article>
      </div>
    </div>
  </section>
  <section id="link-contacts" class="contacts container">

  </section>
</main>
<!--FOOTER-->
<footer>
  <address>
				<p style="text-align: center;">LOREM LOREM LOREM LOREM LOREM</p>
			</address>
</footer>

https://jsfiddle.net/0gxpakuo/

5
  • надо прикрепить к низу страницы или к низу экрана?
    – Skywave
    31 мая 2019 в 11:10
  • position: absolute у вас не прижимает футер к самому низу, потому что в вас задана высота 100%; html, body, header, main { height: 100%; }
    – user298256
    31 мая 2019 в 11:15
  • сделайте header с фикс высотой (например header { height: 250px; } и уберите header { height: 100%; }
    – Odyssey
    31 мая 2019 в 11:19
  • @Skywave к низу страницы. К низу экрана прикрепляется со свойством fixed.
    – worker
    31 мая 2019 в 11:20
  • @Odyssey Немного не понимаю причем здесь header? Header должен быть по замыслу по высоте окна.
    – worker
    31 мая 2019 в 11:23

2 ответа 2

0

Футер упал вниз сразу как только я убрал стиль height: 100% для main

html,
body,
header,
main { /* <-- убрал */
  height: 100%;
}

Но тогда лежащие внутри section'ы схлопнулись.

https://jsfiddle.net/skywave/df3cmv7x/3/

Другой вариант - просто положить футер в main

https://jsfiddle.net/skywave/df3cmv7x/5/

3
  • У меня тоже так получалось. Вся проблема в том, что main { max-width: 960px; margin: 0 auto; } имеет место быть :) Так же пробовал все это сделать путем изменения селектора main на main:not(footer). Эффекта 0.
    – worker
    31 мая 2019 в 11:32
  • @worker, не понял в чем проблема =)
    – Skywave
    31 мая 2019 в 11:55
  • В вашем примере отсутствуем максимальная ширина main. Когда ее поставить, то футер обрезается в эти самые 960px.
    – worker
    31 мая 2019 в 12:46
0

Вот Вам мой "костыль", который не меняет твою разметку. Уверен что можно сделать лучше и проще, но это вроде бы то что Вам нужно.
Вся суть в том чтобы накинуть сss свойство top с значением в пикселях для footer

$(document).ready(function() {
  var height = $('body').outerHeight() + $('#link-hero-page').outerHeight() + $('#link-main').outerHeight() + $('#link-hobbies').outerHeight() + $('#link-portfolio').outerHeight() + $('#link-projects').outerHeight() + $('#nav').outerHeight() + 80; //получаемп значение высоты всех елементов для значение top
  $('footer').css({
    'top': height
  }); // применяем свойство к футеру
});
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat|Nunito+Sans|Roboto&display=swap');
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  word-wrap: break-word;
}

html,
body,
header,
main {
  height: 100%;
}

body {
  width: 100%;
  font-family: Roboto, Verdana, sans-serif;
  font-size: 1em;
  background-image: url(../images/extra_clean_paper.png);
  background-repeat: repeat;
}

header {
  text-align: center;
  background-color: yellow;
}

#hero-header {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#nav {
  text-align: center;
  background-color: dimgray;
  z-index: 2;
}

main:not {
  max-width: 960px;
  margin: 0 auto;
}

.container {
  background-color: #eeeeee;
  border: 1px solid red;
  border-radius: 5px;
  clear: both;
  overflow: hidden;
  margin-top: 1em;
  min-height: 100%;
  padding: 3.125em 0.625em;
  -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
}

.aboutme .col-40 {
  margin-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  width: 39%;
}

.aboutme .col-60 {
  margin-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  width: 59%;
}

.left {
  float: left;
}

.right {
  float: right;
}

.table {
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
}

.hobbies .table-row {
  display: table-row;
  border-bottom: 0.1em solid darkgrey;
}

.hobbies .table-row:last-child {
  border: 0;
}

.hobbies .table-cell {
  display: table-cell;
  padding-left: 1em;
  padding-right: 1em;
  vertical-align: middle;
  text-align: center;
  width: 50%;
}

.portfolio .col-50 {
  margin-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  width: 49%;
}

.projects .flex-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.projects .col-33 {
  position: relative;
  width: 100%;
  max-width: 33%;
  -ms-flex: 0 0 33%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33%;
  flex: 0 0 33%;
}

.projects .services-box {
  background: #f9f9f9;
  padding: 10px;
  margin: 20px 5px 0 5px;
}

footer {
  background: red;
  height: 50px;
  width: 100%;
  position: absolute;
}
<header id="link-hero-page">
  <div id="hero-header">
  </div>
</header>
<nav>
  <ul id="nav">
  </ul>
</nav>
<main>
  <section id="link-main" class="aboutme container">
    <div class="col-40 left">
    </div>
    <article class="col-60 right">
    </article>
  </section>
  <section id="link-hobbies" class="hobbies container">
    <div class="table">
      <div class="table-row">
        <article class="table-cell">
        </article>
      </div>
      <div class="table-row">
        <div class="table-cell">
        </div>
        <article class="table-cell">
        </article>
      </div>
      <div class="table-row">
        <article class="table-cell">
        </article>
      </div>
    </div>
  </section>
  <section id="link-portfolio" class="portfolio container">
    <article class="col-50 left">
    </article>
    <article class="col-50 right">
    </article>
  </section>
  <section id="link-projects" class="projects container">
    <div class="flex-row">
      <div class="col-33">
        <article class="services-box">
        </article>
      </div>
      <div class="col-33">
        <article class="services-box">
        </article>
      </div>
      <div class="col-33">
        <article class="services-box">
        </article>
      </div>
    </div>
  </section>
  <section id="link-contacts" class="contacts container">
  </section>
</main>
<!--FOOTER-->
<footer id='footer'>
  	<address>
		<p style="text-align: center;">LOREM LOREM LOREM LOREM LOREM</p>
	</address>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.