无法将我的页脚放在页面底部

时间:2018-04-01 18:22:19

标签: html css twitter-bootstrap

我在将页脚放在页面底部时遇到了一些麻烦。我试图将html和body标签设置为相对位置的100%高度,但它不会起作用。

以下是我的页面的屏幕截图: Screenshot of my page

以下是我的页脚代码:

    footer {
       background: black;
       padding: 10px 0;
       box-shadow: 0 0 10px 10px #000000;
       text-align: right;
       width: 100%;
       position: absolute;
       bottom: 0;
       left: 0;
       min-height: 74px;
    }

    .footerlogo {
       float: left;
    }

    .info {
       color: white;
       font-size: 10px;
       margin: 0;
       margin-left: 50px;
       max-width: 301px;
    }
            <!--Footer-->

        <section class="container-fluid paddingzero">
            <header class="row">
                <footer class="col-sm-12">
                    <div class="col-sm-3">
                        <img class="footerlogo" src="Images/logo-20.png" />
                    </div>

                    <div class="col-sm-3 col-sm-offset-6">
                        <p class="info">Tlf: +45 50 38 36 45</p>
                        <p class="info">Adresse: Søndergade 6b  Grenaa</p>
                        <p class="info">E-mail: Nee.Kolind@gmail.com</p>
                    </div>
                </footer>
            </header>
        </section>

希望你能帮助我,只要问你是否需要更多信息:)

1 个答案:

答案 0 :(得分:0)

尝试 HTML

<section class="container-fluid paddingzero fixedBottom">
    ...
</section>

CSS

.fixedBottom{
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}

然后像下面的页脚:

footer {
   background: black;
   padding: 10px 0;
   box-shadow: 0 0 10px 10px #000000;
   text-align: right;
   width: 100%;
   min-height: 74px;
}