удержание нижнего колонтитула внизу, но не зафиксированное - PullRequest
Новая
       6

удержание нижнего колонтитула внизу, но не зафиксированное

0 голосов
/ 30 октября 2018

Я пытаюсь сделать нижний колонтитул для своего сайта, он является частичным, и я отображаю его ниже тега <% = yield%> в теле тега файла application.html.erb в макете. Когда страница загружается, она находится внизу, но когда вы прокручиваете ее до конца, она остается в середине страницы. Такая общая проблема, я знаю. Есть так много повторяющихся вопросов, подобных этому, но мне еще предстоит найти решение. Я установил body и html на 100% высоты и определил высоту нижнего колонтитула как определенное количество пикселей и установил абсолютную позицию. Это не сделало это. Вот что у меня есть:

application.html.erb 

  <body>


    <%= yield %>

    <%= render 'layouts/footer' %>
  </body>

_footer.html.erb 

<div id="footer">
  Books4Reviews © 2018 All Rights Reserved
</div>

application.scss 

@media screen and (max-device-width: 700px) {
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
html {
  width: 100%;
  height: 100%;
  margin: 0;
}


/* Footer */

#footer {
  bottom: 0; left: 0; right: 0;
  height: 50px;
  position: absolute;
}

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

Я думаю, что вы хотите достичь чего-то вроде этой страницы , где нижний колонтитул всегда находится внизу, без фиксированной высоты. Вот мое решение для этого (используя flex):

HTML: 

<body>
  <div class="site-content"></div>
  <div class="site-footer"></div>
</body>

CSS: 

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

.site-content {
  flex: 1;
}

Затем вы можете оформить нижний колонтитул так, как вам нравится, и он всегда будет внизу. Я обнаружил, что сейчас это общее решение этой проблемы. Код для трекера с открытым исходным кодом на Github .

0 голосов
/ 25 июля 2019

Итак, после долгих исследований и испытаний в моих собственных проектах, я хочу поделиться своей формулой. Не берусь за это, потому что я уверен, что мои методы похожи, если не точная копия того, что сделал кто-то другой, но эй, если это поможет вам, отлично!

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

Application.html.erb 

<body>
    <div id="site_wrapper">
      <div id="site_content">
        <%= yield %>
      </div>
      <div id="footer"><h3>DMB Web Development, All Rights Reserved © 2019</h3></div>
    </div>
  </body>

Application.scss 

body {
  margin-left: 20%;
  margin-right: 20%;
  position: relative;
  height: 100vh;
}


#site_wrapper {
  position: relative;
  min-height: 100vh;
  display: block;
}

#site_content {
  min-height: 100vh;
  padding-bottom: 100px;
  overflow: hidden;
  display: block;
  position: relative;
}
#footer {
  width: 100%;
  height: 50px;
  color: white;
  font-size: 12px;
  text-align: center;
  border-top-style: solid;
  border-top-width: medium;
  border-top-color: #807B7A;
  position: absolute;
  bottom: 0;
}
0 голосов
/ 30 октября 2018

Избавьтесь от position:absolute. Это заставит ваш нижний колонтитул быть последним элементом уровня блока на странице. Вы также можете удалить свои атрибуты позиционирования, bottom, right, left.

positon: absolute выводит элемент из потока документов - элементы не будут расценивать его как «занимающий место», именно поэтому он кажется плавающим поверх вещей. 

.rest-of-page {
  border: 1px solid red;
  height: 1000px;
}
.footer {
  border: 1px solid blue;
  height: 50px;
  text-align: center;
}
<div class="rest-of-page"></div>
<div class="footer">I am the foot</div>
...