Bootstrap stopka na dole strony 2 kolumny

0

Mam problem ze stopką na dole strony. Wszystko wygląda ok jak oglądamy stronę na ekranie laptopa lub większego monitora. Problem jest dla mniejszych rozdzielczości kiedy kolumny schodzą pod siebie, nie wiem w czym jest błąd. W pliku foortererror pokazuje jak stopka nachodzi na stronę, a w pliku footernormal jest poprawny wynik.

Kod:

<!DOCTYPE html>
<html>
<head lang="pl">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery.backstretch.js"></script>
</head>
<body>
<script>
    $.backstretch("img/bg.jpg");
</script>
<style>
    h1 {
        text-align: center;
        font-family: "AvanteGarde";
        font-size: 70px;
    }
    header p{
        font-family: "AvanteGarde";
        text-align: center;
        font-size: 20px;
    }
    @font-face{
        font-family:"AvanteGarde";
        src: url('font/font2.ttf');
    }
    .col-centered{

        text-align: center;
        margin: 0 auto;
    }
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 60px;
        text-align: center;
        font-family:"AvanteGarde";
    }
    .ng{
        color: #3a8c03;
        font-family: "AvanteGarde";
        font-size: 40px;
        margin-top: 0;
    }
    html {
        height: 100%;
        width: 100%;
        min-width: 100%;
        min-height: 100%;
        position: relative;
     }

    body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        margin-bottom: 60px;
    }

    .container-fluid{
        height:60%;
        display:table;
        width: 100%;
        padding: 0;
    }

    .row-fluid {height: 100%; display:table-cell; vertical-align: middle;}

    .centering {
        float:none;
        margin:0 auto;
    }
    header{
        margin-bottom: 2%;
    }

</style>
<header>
    <h1><label style="color: #3a8c03"> F.P.H.U </label> <label style="color: #254c0b"> Darmont</label></h1>
    <p style="color: #3a8c03">KOMINKI - OCZYSZCZALNIE - DORADZTWO - SERWIS</p>
</header>

<div class="container-fluid" style="width: 900px; margin: auto;">
    <div class="row-fluid">

            <div class="col-sm-6 col-centered">
                <img src="img/oczyszczalnie.png"   class="img-responsive center-block">
                <p class="ng">oczyszczalnie</p>
            </div>

            <div class="col-sm-6 col-centered" style="padding-left: 120px">
                <img src="img/kominki.png" class="img-responsive center-block">
                <p class="ng">kominki</p>
            </div>

    </div>
</div>
<footer class="footer">
    <p>Skontaktuj sie z nami i zapytaj o produkty</p>
    <p>nr. tel: 924 456 256  e-mail: [email protected]</p>
</footer>
</body>
</html>
0 
<div class="row footer">
<div class="col-xs-12 text-center">
<p>xxx</p>
<p>xxx</p>
</div>
</div>
0

wyrzuć ze styli footer:
position: absolute; bottom: 0;width: 100%; :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1