Нижний колонтитул не останется внизу страницы - PullRequest
Новая
       1

Нижний колонтитул не останется внизу страницы

0 голосов
/ 28 января 2019

enter image description here

Нижний колонтитул не останется внизу страницы.Я отрисовываю часть внутри моего файла application.html.erb.Мне интересно, если это потому, что я рендеринг частичного нижнего колонтитула за пределами контейнера Div у меня внутри моего файла erb приложения.

<html>
 <head>
 </head>

  <body>


    <%= render 'shared/navbar'  %>
    <%= render 'shared/message'  %>

    <!-- NOTIFICATIONS -->
    <% if current_user %>
    <input type="hidden" id="user_id" value="<%= current_user.id %>">
    <% end %>



   <div class="container">
    <%= yield %>
  </div>

  <%= render 'shared/footer' %>
  </body>
</html>


<footer class="section footer-classic context-dark bg-image" style="background: #2d3246;">
    <div class="container">
      <div class="row row-30">
        <div class="col-md-4 col-xl-5">
          <div class="pr-xl-4"><a class="brand" href="index.html"><img class="brand-logo-light" src="images/agency/logo-inverse-140x37.png" alt="" width="140" height="37" srcset="images/agency/logo-retina-inverse-280x74.png 2x"></a>
            <p>We are an award-winning creative agency, dedicated to the best result in web design, promotion, business consulting, and marketing.</p>
            <!-- Rights-->
            <p class="rights"><span>©  </span><span class="copyright-year">2019</span><span> </span><span style="color: red;">B</span><span>. </span><span>All Rights Reserved.</span></p>
          </div>
        </div>
        <div class="col-md-4">
          <h5>Contacts</h5>
          <dl class="contact-list">
            <dt>email:</dt>
            <dd><a href="info@budlyfe.com">info@b.com</a></dd>
          </dl>
        </div>
        <div class="col-md-4 col-xl-3">
          <h5>Links</h5>
          <ul class="nav-list">
            <li><a><%= link_to 'About', about_path %></a></li>
            <li><a><%= link_to 'FAQ', faq_path %></a></li>
            <li><a><%= link_to 'Contact', contact_path %></a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

Ответы [ 3 ]

0 голосов
/ 28 января 2019

вам нужно определить статическую высоту для нижнего колонтитула и фиксированную позицию с 0 дном, что-то вроде этого: 

footer {
   position: fixed;
   height: XXX;
   bottom: 0;
   width: 100%;
}
0 голосов
/ 29 января 2019

То, что сказали другие, используя фиксированные позиции, будет работать.Другая альтернатива, если вы не хотите что-то выводить из потока, - это использовать flex.Просто оберните все, что не находится в нижней части контейнера.Затем присвойте классу тела что-то вроде 

body{
 width: 100%;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}
.container{
flex-grow: 1;
}

footer{
flex-grow: 0;
}

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

0 голосов
/ 28 января 2019

Вы пытались добавить в CSS?

Попробуйте что-то вроде этого. 

.footer-classic { 
   position: fixed;
   left:0;
   bottom:0;
   height: defineYourHeight;
   width:100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...