Нижний нижний колонтитул: не выравнивается с левой стороной страницы. Проблема с шаблонами Rails?

У меня возникла странная проблема с моим шаблоном <div class = "container">. Html.erb ", который на 100% больше размера представления, но он не совпадает с левой стороной, поэтому он делает страницу около 10% шире, чем это было бы, также выглядит уродливым.

Уродливый нижний колонтитул

Я думаю, проблема может быть вызвана тем фактом, что браузер делает закрывающий div для после нижнего колонтитула. Я не знаю почему.<!DOCTYPE html> <html> <head> <title>ProfReview</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <%= render 'layouts/header' %> <!-- bootstrap stuff--> <div class="container"> <div class="row"> <div class="center-block "> <% flash.each do |name, msg| %> <%= content_tag(:div,msg, class: "alert alert-info") %> <% end %> <%= yield %> <%= debug(params) if Rails.env.development? %> </div> </div> </div> <%= render 'layouts/footer' %> </body> </html>

Это мое приложение application.html.erb:

<div class="footer">
<footer class="footer">
  <p class="text-muted">Copyright 2016<p>
</footer>
  </div>

Вот footer.html.erb:

/* Footer */

footer {
  background-color: $footer;
  color: $white;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  margin-top: 25px;
  padding-left: 20px;
  padding-top: 10px;
}

И, наконец, footer.css

<div class="container">
  <div class="row">
    <div class="center-block ">        
<div class="panel panel-default">

 <!-- Main content -->

  </div>
  </div>
</div>

<div class="footer">
<footer class="footer">
  <p class="text-muted">Copyright 2016 </p><p>
</p></footer>
  </div>
</div>

Chrome отображает это как:

footer

html,css,ruby-on-rails,twitter-bootstrap,

1

Ответов: 1

0

Поскольку вы используете абсолютное позиционирование, вы можете заставить footer«прикрепить» концы, добавив

left: 0;
right: 0;

Из-за этих свойств вы можете отказаться width: 100%.

Вы также можете уйти margin-top: 25px, потому что абсолютно позиционированные элементы выведены из нормального потока документа, поэтому этот запас не повлияет на другие элементы компоновки.

Ваша полная декларация CSS может быть

footer {
  background-color: $footer;
  color: $white;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 40px;
  padding-top: 10px;
}
HTML, CSS, рубин-на-рельсы, твиттер-самозагрузки,
Похожие вопросы
Яндекс.Метрика