bootstrap+rails: fixed top-navbar, footer always on bottom and a full-height div in the middle
Question
I've found many threads on this topic but I'm not able to figure out what I'm doing wrong.
This is the test website I'm working on: https://twitterdave.herokuapp.com
I'd like the navbar to remain always on the top of the page, and the div containing the image to cover the space above the fold; then, immediately below, I'd like to display other div(s) and the footer which must remain always on the bottom of the page, when contents are not enough to fill a page height.
This is my 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>
This is the 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>
This is the footer partial _footer.html.erb
<footer class="footer">
<div class="container">
<copyright>
© 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>
This is the menu 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>
and these are the relevant 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;
}
}
This is my very first attempt of customization of the Michael Hartl's Ruby on Rails tutorial's sample app... Thanks in advance for your support! :)
2 answers
solution1
0 ACCPTED 2015-12-01 14:33:35
At the end I solved it by myself, here the solution that might be of general/public interest:
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;
}
I just added height: calc(100vh - 151px); //footer = 100, topmenu = 50 height: calc(100vh - 151px); //footer = 100, topmenu = 50 to the header class and it works as requested.
Cheers :)
solution2
-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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Align bottom of Bootstrap fixed navbar to top of div
Combining a bootstrap sticky footer with full-height content DIVs
Bootstrap 4.0 - responsive header with image + navbar + full-height body
Bootstrap 4 background image full-height with navbar no scrolling
Fixed Bootstrap navbar to top of dynamic width DIV - not full width of page
Top and bottom fixed height with fluid height middle
Bootstrap Navbar-Fixed Bottom Sticky Footer
bootstrap 4 flex sticky footer and fixed top navbar
Footer always on bottom with fixed header/height
Full-height Fixed Left Sidebar implementation
Related Tags