I have a problem with a template. On a large screen, it's look fine, like this:

But when I resize my browser, the content won't push the footer down. Here is a picture:

Here is my code, which is too long so forgive me.
index.php

<!-- Navigation -->

<nav class=navbar navbar-default navbar-fixed-top>

    <div class=container>

        <!-- Brand and toggle get grouped for better mobile display -->

        <div class=navbar-header page-scroll>

            <!-- simple code -->

        </div>



        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class=collapse navbar-collapse id=bs-example-navbar-collapse-1>

            <!-- simple code -->

        </div>

        <!-- /.navbar-collapse -->

    </div>

    <!-- /.container-fluid -->

</nav>



<!-- Begin page content -->

<header>

    <div class=container>

        <div class=row>

            <div class=col-lg-12>

                <img class=img-responsive src=<?php echo base_url(); ?>assets/img/simple_img.png alt= style=height: 200px;>

                <div class=intro-text>

                    <!-- simple intro -->

                </div>

            </div>

        </div>

    </div>

</header>



<footer class=text-center>

    <div class=footer-above>

        <div class=container>

            <div class=row>

                <div class=footer-col col-md-4>

                    <h3>Location</h3>

                    <p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>

                </div>

                <div class=footer-col col-md-4>

                    <h3>Around the Web</h3>

                    <ul class=list-inline>

                        <!-- some social networks -->

                    </ul>

                </div>

                <div class=footer-col col-md-4>

                    <h3>About Freelancer</h3>

                    <p>Freelance is a free to use, open source Bootstrap theme created by <a href=http://startbootstrap.com>Start Bootstrap</a>.</p>

                </div>

            </div>

        </div>

    </div>

    <div class=footer-below>

        <div class=container>

            <div class=row>

                <div class=col-lg-12>

                    Copyright &copy; Author <?php echo date(Y); ?>

                </div>

            </div>

        </div>

    </div>

</footer>

Here is my Css, which is also too long so forgive me( I deleted some irrelevant code ).

            /* 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: 340px;

          background-color: #f5f5f5;

        }





        /* Custom page CSS

        -------------------------------------------------- */

        /* Not required for template or sticky footer method. */



        body > .container {

          padding: 60px 15px 0;

        }

        .container .text-muted {

          margin: 20px 0;

        }



        footer > .container {

          padding-right: 15px;

          padding-left: 15px;

        }



        code {

          font-size: 80%;

        }



        /*!

         * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)

         * Code licensed under the Apache License v2.0.

         * For details, see http://www.apache.org/licenses/LICENSE-2.0.

         */



        body {

            overflow-x: hidden;

        }



        header {

            text-align: center;

            color: #fff;

            background: #18bc9c;

        }



        header .container {

            padding-top: 100px;

            padding-bottom: 50px;

        }



        @media(min-width:768px) {

            header .container {

                padding-top: 200px;

                padding-bottom: 69px;

            }



            header .intro-text .name {

                font-size: 4.75em;

            }



            header .intro-text .skills {

                font-size: 1.75em;

            }

        }



        @media(min-width:768px) {

            .navbar-fixed-top {

                padding: 25px 0;

                -webkit-transition: padding .3s;

                -moz-transition: padding .3s;

                transition: padding .3s;

            }



            .navbar-fixed-top .navbar-brand {

                font-size: 2em;

                -webkit-transition: all .3s;

                -moz-transition: all .3s;

                transition: all .3s;

            }



            .navbar-fixed-top.navbar-shrink {

                padding: 10px 0;

            }



            .navbar-fixed-top.navbar-shrink .navbar-brand {

                font-size: 1.5em;

            }

        }



        .navbar {

            text-transform: uppercase;

            font-family: Montserrat,Helvetica Neue,Helvetica,Arial,sans-serif;

            font-weight: 700;

        }



        .navbar a:focus {

            outline: 0;

        }



        .navbar .navbar-nav {

            letter-spacing: 1px;

        }



        .navbar .navbar-nav li a:focus {

            outline: 0;

        }



        .navbar-default,

        .navbar-inverse {

            border: 0;

            background-color:#233140;

        }



        footer {

            color: #fff;

        }



        footer h3 {

            margin-bottom: 30px;

        }



        footer .footer-above {

            padding-top: 50px;

            background-color: #2c3e50;

        }



        footer .footer-col {

            margin-bottom: 50px;

        }



        footer .footer-below {

            padding: 25px 0;

            background-color: #233140;

        }

How can I solve this, so the page content will push the footer down...at any size of browser.
Any help is appreciated.