0

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:

enter image description here

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>
            <a href="http://www.contact.com/contact-me/">Contact Me</a>
        </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.

4
  • Bootstrap has navbar-fixed-bottom, doesnt that wor for you? getbootstrap.com/components/#navbar-fixed-bottom Commented Aug 23, 2015 at 23:29
  • @TheUknown I have tried that as well [even copied the CSS over]. The footer would still be in the middle of the page. Commented Aug 23, 2015 at 23:42
  • can you make a fiddle? Commented Aug 23, 2015 at 23:47
  • Why have you got a div outside of your body tag?
    – Jay
    Commented Aug 24, 2015 at 7:59

3 Answers 3

0

try using this:

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

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

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

  2. Remove any position: absolute; css from footer div to turn it back in normal flow of html.

0

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.

  1. Edit @yield() section like a min-height:600px.
  2. 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. :-)

1
  • Did you mean .body { .. }? I tried both body and .body and it did not work. Commented Aug 23, 2015 at 23:42
0

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"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </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>
            <a href="http://www.contact.com/contact-me/">Contact Me</a>
        </small>
    </h6>

  </div>
</div>
<span class="icon-up">
    
        <i class="fa fa-calendar icon-circle"></i>
    
</span>

<!-- /top-link-block -->

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.