Блог

Главная - Вопросы по программированию - Нижний колонтитул начальной загрузки: не выровнен с левой стороной страницы. Проблема с шаблоном Rails?

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

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

#HTML #css #ruby-on-rails #twitter-bootstrap

Вопрос:

У меня возникла странная проблема с моим шаблоном «footer.html.erb», он на 100% соответствует размеру представления, но не совпадает с левой стороной, поэтому делает страницу примерно на 10% шире, чем она была бы, это также выглядит уродливо.

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

Я думаю, что проблема может быть вызвана тем фактом, что браузер отображает закрывающий div <div class="container"> после разделения нижнего колонтитула. Я не знаю почему.

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

 <!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>

Вот нижний колонтитул.html.erb:

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

И, наконец, нижний колонтитул.css

 /* Footer */

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

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

 <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>

Комментарии:

1. JSFiddle пожалуйста

2. Я считаю, что это проблема с шаблоном Rails (возможно), поэтому я не знаю, насколько поучительной была бы скрипка, но вот она: jsfiddle.net/tfantina/hfmnmo6p

3. Это беспорядок. По-видимому, игнорирование кода php. Если вы можете получить визуальную ссылку, которая поможет нам помочь вам.

4. Как ни странно, я просто отправил его в Heroku, и, похоже, это не проблема.

5. Понятия не имею, о чем вы говорите

Ответ №1:

Поскольку вы используете абсолютное позиционирование, вы можете принудительно 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;
}