Question

我正在使用joomla设计一个网站并使用bootstrap框架。现在我的页脚出了问题。基本上我使用简单的网格布局，我希望网站的内容部分位于页面的中心，左侧和右侧都有我已经实现的空间。而现在我希望页脚不像中间内容，而是在页面的末尾和整个宽度而不是固定。所以我想通常向下滚动页面，在页面的末尾，页脚将以全宽显示。我搜索了很长一段时间，但我不喜欢＆＃39;找到有效的解决方案。我希望有人可以帮助我实现它......

以下是php-page的脚本和我使用的css文件

的index.php

<!DOCTYPE html>
<html>
<head>
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- main container -->
    <div class='container'>
        <!-- header -->
        <div class="mainMenuTop"/>
        <div class='row'>
            <jdoc:include type="modules" name="position-1" style="well" />
        </div>
        <div class='row'>
            <!-- main content area -->
            <div class='span12'>
                <div class="article">
                    <jdoc:include type="component" />
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class='row'>
            <div class='span12'>
                <div class='footer'>
                <jdoc:include type="modules" name="footer" style="none" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

的style.css

body 
{
    overflow-y: scroll;
    background: url(../images/Test.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

.article
{
    padding: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255); /* The Fallback */
    font-size: 12pt;
    font-family:"Calibri", Times, serif;
}

.footer
{
    height: 50px;
    border-top: solid 1px black;
}

亲切的问候， oodoloo

Answer 1

您可以将页脚放在主内容容器后面<div class="container">。然后，您可以指定一个不限制页脚宽度的容器类，就像主内容一样。 E.g。::

<div class="container">
      ...
</div>
<div id="footer" class="container-fluid">
    <div class="row">....</div>
</div>

Answer 2

根据我的需要，现在我修好了，就像你在这里看到的那样： jsfiddle-example

.footer
{
    height: 50px;
    background-color: black;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

我已将“width：100％”，“position：absolute”，“left：0”和“right：0”添加到css-class“.footer”。我认为决定性的是“立场：绝对”。然后我必须添加“left：0”，因为左侧不占用全尺寸。添加它之后就可以了。由于完整性，我添加了“正确：0”。不知道在任何其他浏览器中是否需要它。在没有它的情况下也可以使用它。

Answer 3

我这样做是对的：

@media(max-width:500px){

    .footer{
        float:left;
        width:109%;
        margin-left:-5%;
    }

}

Answer 4

我遇到了同样的问题，无法让页脚跨越页面的整个宽度。我使用Chrome开发工具查看了阻止页脚扩展的原因。我发现问题出在我使用“容器”类的地方。每次都会添加填充，并且由于某种原因，页脚将无法跨越页面上的该填充，即使该填充位于单独的div中也是如此。我将容器div更改为具有“ container-fluid”类，并在CSS中删除了“ container-fluid”类的填充。页脚现在可以使用，并且容器仍然可以响应。我必须手动调整一些需要额外填充样式的元素。不知道这是否是正确的解决方案，但是它可以满足我的需求。

Bootstrap页脚，页面全宽

4 个答案: