堆棧內存溢出
  簡體   English   中英

bootstrap + rails：固定的頂部導航欄，頁腳始終在底部，中間是全高div

[英]bootstrap+rails: fixed top-navbar, footer always on bottom and a full-height div in the middle

 原文  2015-10-25 21:51:02  2   2    css/ ruby-on-rails/ html5/ twitter-bootstrap/ footer

問題描述

我在這個主題上發現了很多話題，但是我無法弄清楚自己在做什么。

這是我正在工作的測試網站： 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>

這是菜單的部分-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教程示例應用程序的第一次嘗試...在此先感謝您的支持！ :)

2 個解決方案

解決方案1
 0 已采納  2015-12-01 14:33:35

最后，我自己解決了這個問題，下面是可能具有普遍/公共利益的解決方案： 

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 height: calc(100vh - 151px); //footer = 100, topmenu = 50 header類的height: calc(100vh - 151px); //footer = 100, topmenu = 50 ，它可以按要求工作。

干杯:)

解決方案2
 -1  2015-10-25 22:01:18

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將Bootstrap固定導航欄的底部與div的頂部對齊 將自舉粘貼頁腳與全高內容DIV組合 Bootstrap 4.0 - 帶有圖像 + 導航欄 + 全高主體的響應式標題 Bootstrap 4背景圖像全高，導航欄無滾動 將Bootstrap導航欄固定到動態寬度DIV的頂部-並非頁面的全寬 頂部和底部固定高度，流體高度中間 Bootstrap Navbar固定底部粘性頁腳 bootstrap 4 flex粘性頁腳和固定頂部導航欄 頁腳始終在底部，頁眉/高度固定 全高固定的左側邊欄實現
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM