I have read a lot of posts about this but I still didn't find an answer.
I have a footer that I want to be at the end of the page, not fixed.
The problem is that the footer is where the content ends. Look at picture.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech - Privatni korisnici </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<!--Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
<font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li> Početna strana </li>
<li class="active"> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mojFooter">
<font face="Roboto Condensed" size="4"> <center>
<div class="container">
<div class="row" style="margin-top: 7px;">
<p> © Copyright Ivan Prošić 2016.</p>
</div>
<div class="bottom-footer">
<div class="col-md-12">
<ul class="footer-nav">
<li> Facebook </li>
<li> Twitter </li>
<li> Google+ </li>
</ul>
</div>
</div>
</div>
</font> </center>
</footer>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is my CSS, for the footer only:
.mojFooter{
background-color: #f8f8f8;
color: #00a651;
padding-top: 0px;
border-top: 1px solid #e7e7e7;
margin-bottom: 0px;
}
.bottom-footer{
border-top: 1px solid #00a651;
margin-top: 0px;
padding-top: 7px;
color: #00a651;
}
.footer-nav li{
display: inline;
padding: 0px 40px;
}
.footer-nav a{
color: grey;
text-decoration: none;
}
When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>CONTENT</content>
<footer class="mt-auto"></footer>
</body>
Please check the examples: Bootstrap 4 Bootstrap 5
In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.
body {
min-height: 100vh;
position: relative;
margin: 0;
padding-bottom: 100px; //height of the footer
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
height: 100px;
}
Please check this example:
Bootstrap 3
In my case for Bootstrap4:
<body class="d-flex flex-column min-vh-100">
<div class="wrapper flex-grow-1"></div>
<footer></footer>
</body>
You can just add:
style="min-height:100vh"
to your page content container and place the footer in another container
Use this stylesheet:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
© 2021 Company, Inc
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
:root {
--text: #daf7a6;
--header: #581845;
--main: #900c3f;
--footer: #ff5733;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
header,
main,
footer {
color: var(--text);
height: 100px;
padding: 1rem;
}
header {
background-color: var(--header);
}
main {
background-color: var(--main);
}
footer {
background-color: var(--footer);
position: sticky;
top: 100vh;
}
<header>header</header>
<main>content</main>
<footer>footer</footer>
Related
I have a simple side nav that I built out that I want fixed. From my understanding of bootstrap classes columns are supposed to be aligned. My second column for most of my page content ends up falling behind my sidenav. How do you have a second column aligned with your first while keeping that first column fixed?
#logo {
height: 40vh;
width: 20vw; }
.dropdown-toggle, .dropdown-menu {
width: 300px; }
.btn-group img {
margin-right: 10px; }
.dropdown-toggle {
padding-right: 50px; }
.dropdown-toggle .glyphicon {
margin-left: 20px;
margin-right: -40px; }
.dropdown-menu > li > a:hover {
background: white; }
/* $search-blue */
.dropdown-header {
background: #ccc;
font-size: 14px;
font-weight: 700;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 5px; }
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
border: 1px solid pink; }
/*# sourceMappingURL=notification.css.map */
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="background-color: #e0f7fa">
<div class="d-flex flex-row" style="border:1px solid black;">
<div class="col d-flex justify-content-start" style="border:1px solid blue;">
<img id="logo" src="./images/logo.png">
</div><!--logo -->
<div class="col d-flex align-items-center justify-content-end" style="border:1px solid red;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="http://lorempixel.com/75/50/abstract/" style="border-radius: 50%;">
0123 4567 8912 3456
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Member name (you)</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
<li class="dropdown-header">Member name</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
</ul>
</div>
</div><!--dropdown for profile image,name and description -->
</div>
</div><!--container for header -->
<div class="container-fluid" style="border: 1px solid black">
<div class="row">
<div class="col-4 position-fixed align-self-start">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Notification</h3>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active">Edit Profile</li>
<li>Privacy & Security</li>
<li>Payment Setting</li>
<li>Transaction History</li>
<li>Trust & Verfication</li>
<li>My Education Blog</li>
<li>Promotions</li>
</ul>
<ul>Cancel Account</ul>
</nav>
</div>
<div class="col-8 align-self-center">
<h3>Send notifications via</h3>
</div><!--this should be directly next to navbar -->
</div>
</div><!--container for navbar and page content -->
You can see that I have a header in the top page with an image and a dropdown in its own container. Then following that I have a container with the sidenav and where it says "get notifications via" is misplaced. I added borders so you can see the where everything is located.
I tried to align text on the right side of image with
img {
float: left;
margin-right: 9px;
}
But it doesn't always work (on codepen it seems it works but not on my localhost)
full source code with Bootstrap and AngularJs
https://codepen.io/anon/pen/YZGjgq
<!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
<title>Details Layout</title>
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style media="screen">
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
</style>
<style media="screen">
.hidden {
display: none;
}
</style>
<style>
/* start left side menu */
ul.menu-navigation {
font-size: 1.2em;
float: left;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
background: #e25454;
border-bottom: 1px solid #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a {
display: block;
color: #fff;
text-decoration: none;
width: 205px;
padding: 10px 10px 10px 35px;
border-top: 1px solid #BF4E4E;
border-bottom: 1px solid #BF4E4E;
}
ul.menu-navigation li span {
display: none;
}
ul.menu-navigation li a:hover {
background-color: #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a:hover span {
display: block;
font-size: 0.8em;
padding: 10px 0;
}
/* end left side menu */
</style>
<style>
img {
float: left;
margin-right: 9px;
}
</style>
<script>
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $window, $sce) {
$scope.sections = [
{id:'section1',name:'Section 1'},
{id:'section2',name:'Section 2'},
{id:'section3',name:'Section 3'},
{id:'section4',name:'Section 4'},
];
});
</script>
</head>
<body ng-app="app" ng-controller="MainCtrl" >
<div class="container">
<div class="row">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Accueil</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="media">
<div class="media-left">
<img src="http://www.freeiconspng.com/uploads/person-icon-5.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Mr DOE John</h4>
<a href="#">CEO <span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
</div>
</a>
</h4>
</div>
<ul class="menu-navigation nav-tabs">
<li ng-repeat="section in sections">
<a href="#{{section.id}}" id="mnu{{section.id}}" class="mnu" data-toggle="tab" data-target="#{{section.id}}">{{section.name}}
<span>
Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
</span>
</a>
</li>
</ul>
<!-- End Left_Side_NavBar_Component_Html -->
</div>
<div class="col-sm-9 tab-content" >
<form class="form-group" action="index.html" method="post" id="sections">
<div id="myTabContent" class="tab-content"> <!-- start class .tab-content to create tab -->
<!-- start tab 1 -->
<div class="tab-pane in active" id="{{sections[0].id}}"> <!-- tab 1-->
{{sections[0].name}} content
</div>
<!-- end tab 1 -->
<div class="tab-pane " id="{{sections[1].id}}"><!-- tab 2 -->
{{sections[1].name}} content
</div>
<div class="tab-pane " id="{{sections[2].id}}"><!-- tab 3 -->
<!-- start tab 3 content -->
{{sections[2].name}} content
<!-- end tab 3 content -->
</div>
<div class="tab-pane " id="{{sections[3].id}}"> <!-- tab 4 -->
{{sections[3].name}} content
</div>
</div> <!-- end class .tab-content to create tab -->
</form>
</div>
</div>
</div>
</body>
</html>
Override .media-left css class, add float:left in it.
.media-left{
float:left
}
I am developing a website where the body is split into two sections using Materialize grid. On the left side the website has a fixed image that wont change, the right side has content that a user can scroll up and down on. There is also a fixed navbar and fixed footer. Here is the layout
Here you can see as you scroll down where the whitespace starts here
I want the right side to not have any white space and just have the div content show. I looked through each element through the inspect tool and saw no additional padding or margins. I am wondering if the fixed left side is adding pixels to the bottom of the left side?
Here is my index.html `
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title> Sequel Seattle Apartments </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">
<img class="mainlogo" src="logo_navy.png" alt="Sequel Apartments Seattle"/>
</a>
<ul class="bigbuttoncta right hide-on-med-and-down">
<li><a class="waves-effect waves-light btn">Apply Now</a></li>
<li><a class="waves-effect waves-light btn">Contact Us</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li>Aparmtents</li>
<li>Sequel Lifestyle</li>
<li>Location</li>
<li>Amenities</li>
<li>Gallery</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Aparmtents</li>
<li>Sequel Lifestyle</li>
<li>Location</li>
<li>Amenities</li>
<li>Gallery</li> </ul>
<i class="material-icons">menu</i>
</div>
</nav>
<!-- START OF CONTENT -->
<div id="allcontentfields" class="row">
<!-- Left Hand side of the screen, static content -->
<div class="col s5 leftsection">
<div id="index-banner" class="parallax-container">
<img src="background1.jpg" alt="Unsplashed background img 1">
</div>
</div>
<!-- Right hand side of the screen, all dynamic content -->
<div class="col s7 offset-s5 rightsection" >
<!-- SECTION 1 -->
<div class="section scrollspy" id="section1">
<div class="row">
<h1>Text goes here </h1>
</div>
</div>
<!-- SECTION 2 -->
<div class="section scrollspy" id="section2">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
<div class="parallax"><img src="background2.jpg" alt="Unsplashed background img 2"></div>
</div>
</div>
</div>
</div>
<!-- SECTION 3 -->
<div class="section scrollspy" id="section3">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 4 -->
<div class="section scrollspy" id="section4">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 5 -->
<div class="section scrollspy" id="section5">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER SECTION -->
<footer class="page-footer teal">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="brown-text text-lighten-3" href="http://herocreativemedia.com">Hero Creative Media, LLC</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
`
Here is the CSS, I am using Materialize so they have a css file as well but I haven't messed with it.
/* Custom Stylesheet */
/**
* Use this file to override Materialize files so you can update
* the core Materialize files in the future
*
* Made By MaterializeCSS.com
*/
html, body {
margin:0;
padding: 0;
}
nav ul a,
nav .brand-logo {
color: #444;
}
nav {
position: fixed;
width: 100%;
}
.col {
position:relative;
margin-top: 125px;
}
.row .col.s5 {
margin-left:0;
left:0;
right:0;
padding:0;
}
.row .col.offset-s5 {
padding:0;
height: auto;
}
.leftsection {
position: fixed;
z-index: -1;
margin-top: 200px;
padding:0;
overflow:hidden;
padding-left: 0;
padding-right: 0;
}
.rightsection {
position: relative;
z-index: -1;
margin-top: 200px;
padding:0;
overflow: hidden;
height: auto;
}
#section1 {
position:relative;
height: 700px;
width: 100%;
background-color:red;
overflow-y: scroll;
padding:0;
}
#section2 {
position:relative;
height: 700px;
width: 100%;
padding: 0;
overflow-y: scroll;
}
#section3 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:blue;
z-index: -1;
overflow-y: scroll;
}
#section4 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:yellow;
z-index: -1;
overflow-y: scroll;
}
#section5 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:orange;
z-index: -1;
overflow-y: scroll;
padding-bottom: 0;
}
.mainlogo {
width: 100%;
margin-left: -50px;
margin-top: 40px;
}
.bigbuttoncta {
margin-top: 10px;
}
.bigbuttoncta li {
margin: 20px;
}
p {
line-height: 2rem;
}
.button-collapse {
color: #26a69a;
}
.parallax-container {
min-height: 780px;
line-height: 0;
height: auto;
color: rgba(255,255,255,.9);
z-index: -1;
}
.parallax-container .section {
width: 100%;
}
#media only screen and (max-width : 992px) {
.parallax-container .section {
position: absolute;
top: 40%;
}
#index-banner .section {
top: 10%;
}
}
#media only screen and (max-width : 600px) {
#index-banner .section {
top: 0;
}
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
footer.page-footer {
margin-top: 100%;
display:block;
}
I just figured out that it was my footer.page-footer had a margin top that was set to 100% so in essence created a huge sroll that was showing on one half of the screen since the other half was fixed. I removed that and I am all set.
Note to self....delete the stupid CSS you put in when trying to figure stuff out.
I've got a Blade main template like this that allows me to use a single template to house a number of different containers like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>
#yield('title')
</title>
#include('libs.libs')
#include('google.analytics')
</head>
<body>
#include('partials.nav_sched')
<div class="container">
#yield('content')
</div>
#yield('schedule')
</body>
<div class="panel-footer navbar-bottom">
#include('partials.footer-sched')
</div>
</html>
#include('js.libs')
#include('js.add-class')
The problem with this is, my footer is way up in the middle of the page:
This is my partials/footer-sched:
<div class="container">
<p class="text-muted text-center">
Made with ♥ by Drexel Students for Drexel Students
</p>
<h6 class="text-muted text-center">
<small>
Contact Me
</small>
</h6>
</div>
I tried numerous things such as taking the footer out of the main body, using custom CSS:
.panel-footer{
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
background-color: #ffffff;
}
I just have been unable to have the footer at the bottom of the page. I don't want a sticky footer, but I just want a footer that stays at the bottom of the page.
try using this:
add a new class 'contentHeight' to container div which contains all your content, or is the middle div between top navigation and footer at bottom.
add this at the bottom of you html code just before where body tag ends
<script>
var canvasHeight = $(window).height();
var navHeight = $('.nav').height();
//'nav' this should be replaced with class name which your navigation has in original
var footerHeight = $('.panel-footer').height();
var addHeight = canvasHeight - (navHeight + footerHeight)
$(document).ready(function (){
$('.contentHeight').css('min-height', addHeight)
});
</script>
The code you posted in your question shows <div class="panel-footer navbar-bottom">...</div> outside of closed </body> tag. Get this inside of it.
Remove any position: absolute; css from footer div to turn it back in normal flow of html.
you can use a bottom: 0; position: absolute in a .panel-footer, but this is not suit for all situation.
I think there're two easy solutions.
Edit #yield() section like a min-height:600px.
Add body { min-height: 800px; } in your css file.
anyway.. you have to fix code like below:
<div class="panel-footer navbar-bottom">
#include('partials.footer-sched')
</div>
</body>
</html>
I hope you'll solve problem. :-)
You can try adding this to your .panel-footer CSS: see working example.
position: absolute;
right: 0;
bottom: 0;
left: 0;
/**Styling: Non-Footer Related**/
h1 {
text-align: center;
}
.icon-up {
position: absolute;
right: 15px;
bottom: 15px;
color: white;
}
.icon-circle {
position: relative;
background: red;
padding: 20px;
border-radius: 50%;
}
/**Styling: Footer Related**/
div.panel-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
background-color: #ffffff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Search for Class</h1>
<input type="text" class="form-control" placeholder="Search for...">
</div>
<div class="panel-footer">
<div class="container">
<p class="text-muted text-center">Made with ♥ by Drexel Students for Drexel Students</p>
<h6 class="text-muted text-center">
<small>
Contact Me
</small>
</h6>
</div>
</div>
<span class="icon-up">
<i class="fa fa-calendar icon-circle"></i>
</span>
<!-- /top-link-block -->
I want to put an image on top of the footer, but my image is lying somewhere in the middle of the screen. I have tried vertical-align, wokaround using margin, but no success yet.
Here's jsFiddle
Here's my HTML structure,
<body id="extranav">
<div class="wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.php"><img src="images/logo.png" ></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>FAQ</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<br><br>
<div class="text-center">
<a href="#" class="fa icon fa-twitter fa-lg" ></a>
<br><br>
<div class="footer-links">
Feedback
AboutUs
FAQ
<p>© All Rights Reserved</p>
</div>
</div>
</div>
</body>
And the CSS
html,body
{
height: 100%;
/*font-size: 15pt;*/
font-family: 'Varela Round', sans-serif;
background-color: #fff;
min-height: 1024px;
}
.footer
{
background-color: #2D3339;
color: white;
}
.footer a
{
line-height: 2.8em;
}
.footer-links a,.footer-links p
{
color: #aaa;
text-align: center;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
.footer, .push {
height: 200px;
font-size: 15px;
}
.push
{
background: url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom transparent;
}
Why don't you put the footer image div directly inside the footer? It will naturally fall right above the footer that way, then you just need to adjust the CSS so that the footer is 400px tall(200px for the image and 200px for the footer section below the image):
.footer
{
height:400px;
font-size: 15px;
background-color:#2D3339;
color:white;
}
.push
{
height:200px;
background:url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom;
}
JSFiddle
Do you mean like this?
Relevant HTML:
<div class="footer">
<div class="push"></div>
<br />
<br />
<div class="text-center">
<br />
<br />
<div class="footer-links">
Feedback
AboutUs
FAQ
<p>© All Rights Reserved</p>
</div>
</div>
</div>
Relevant CSS:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -400px;
}
.footer {
height: 400px;
font-size: 15px;
}
.push
{
height:200px;
background: url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom transparent;
}