Question

我在这个主题上找到了许多主题，但我无法弄清楚我做错了什么。

这是我正在研究的测试网站：https://twitterdave.herokuapp.com

我希望导航栏始终位于页面顶部，而div包含图像以覆盖折叠上方的空间;然后，在下面，我希望显示其他div和页脚，当内容不足以填充页面高度时，页脚必须始终保留在页面底部。

这是我的application.html.erb

<!DOCTYPE html>
<html>

<head>
  <title><%= full_title(yield(:title)) %></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <%= render 'layouts/shim' %>
</head>

<body>
    <%= render 'layouts/menu' %>
    <% flash.each do |message_type, message| %>
      <div class="container alert alert-<%= message_type %>"><%= message %></div>
    <% end %>
    <%= yield %>
    <%= render 'layouts/footer' %>
</body>

<%= debug(params) if Rails.env.development? %>

</html>

这是home.html.erb

<header>
    <div class="header-content">
        <div class="header-content-inner">
            <h1>This is TwitterDave</h1>
            <hr>
            <h2>
              A big THANK YOU to 
              <a href="http://www.railstutorial.org/" target="_blank">Ruby on Rails Tutorial</a>
              for making this possible ;)
            </h2>
            <%= link_to "Sign up now!", signup_path, class: "btn btn-primary btn-xl" %>

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

这是页脚部分_footer.html.erb

<footer class="footer">
      <div class="container">
              <copyright>
                  &copy; Twitterdave <%= Time.now.year %>
              </copyright>
              <nav>
                <ul>
                  <li><%= link_to "About",   about_path %></li>
                  <li><%= link_to "Contact", contact_path %></li>
                  <li><a href="http://news.railstutorial.org/">News</a></li>
                </ul>
              </nav>
      </div>
</footer>

这是菜单partial -menu.html.erb

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "twitterdave", root_path, class: "navbar-brand", id: "logo" %>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home", root_path %></li>
        <li><%= link_to "Help", help_path %></li>
        <% if logged_in? %>
          <li><%= link_to "Users", users_path %></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Account <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><%= link_to "Profile", current_user %></li>
            <li><%= link_to "Settings", edit_user_path(current_user) %></li>
            <li class="divider"></li>
            <li>
              <%= link_to "Log out", logout_path, method: "delete" %>
            </li>
          </ul>
        </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </div><!--/.nav-collapse -->

  </div>
</nav>

这些是相关的CSS

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixins, variables, etc. */

$gray-medium-light: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

/* universal */

html {
  position: relative;
  min-height: 100%;
} 

body {
    margin-top: 51px;
    margin-bottom: 100px; /* Margin bottom by footer height */
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

/* header */

#logo {
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;
    background-image: url(image-path('header.jpg'));
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover; 
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center;
}

header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 6em;
}

header .header-content .header-content-inner h2 {
    margin-bottom: 50px;
    font-size: 1.5em;
    color: rgba(255,255,255,.7);
}

/* footer */

footer {
  color: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100px;
  background-color: #233140;
  padding: 25px 0;
  width: 100%;

}

footer a {
  color: $gray;
  &:hover {
    color: #fff;
    text-decoration: none;
  }
}

footer copyright {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
  li {
    float: left;
    margin-left: 15px;
  }
}

这是我第一次尝试定制Michael Hartl的Ruby on Rails教程示例应用程序...提前感谢您的支持！：）

Answer 1

最后，我自己解决了这个问题，这里可能是一般/公共利益的解决方案：

header {
    position: relative;
    width: 100%;
    height: calc(100vh - 151px); //footer = 100, topmenu = 50
    max-width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff; 
    background-image: url(image-path('header.jpg'));
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    overflow-wrap: break-word;
    word-wrap: break-word;

}

我刚刚将height: calc(100vh - 151px); //footer = 100, topmenu = 50添加到header类，它可以按要求运行。

干杯：）

Answer 2

    <div class="navbar-wrapper">
  <div class="container">
   <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">i am corey thomas</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">My Work</a></li>
            <li><a href="#contact">WebDev</a></li>
            <li><a href="#contact">Contact</a></li>
            </li>
          </ul>
        </div>
      </div>
    </nav>

  </div>
</div>

bootstrap + rails：固定top-navbar，页脚总是在底部，中间是一个全高div

2 个答案: