Question

我的页脚有问题。

一边我有两列。这些列设置为自动上边距。

以此为例：http://jsfiddle.net/jewelsjacobs/kSgE6/light/。

如果您更改分辨率以使列落在她的脚下与图片重叠，而不是一直位于页面底部。

示例： enter image description here 普通视图：

<!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: aaa@sga.com</p>
</footer>
</body>
</html>

Answer 1

粘性页脚的Bootstrap website上有很好的示例代码，
working example

bootstrap粘性页脚和两个响应列

1 个答案: