引导页脚，页面全宽答案

【问题标题】：Bootstrap Footer, Full Width Of Page引导页脚，页面全宽
【发布时间】：2014-05-23 02:26:45
【问题描述】：

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

下面是我使用的php页面的脚本和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;
}

亲切的问候，呸呸呸

【问题讨论】：

标签： twitter-bootstrap footer

【解决方案1】：

您可以将页脚放在主要内容容器之后的<div class="container"> 之间。然后你可以分配一个不限制页脚宽度的容器类，就像主要内容一样。例如::

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

【讨论】：

感谢您的快速回复！我试过这个，但这还不足以满足我的需求。现在我不知道如何实现 div 填充整个页面。当我设置固定宽度时，div 只会扩大到右侧，左侧已经从内容开始的点开始。你能再帮我一次吗？
你能创建一个在 jsfiddle.net 或 codepen.io 上共享的独立且可重复的示例吗？除非您可以阅读和编辑实际代码，否则不费吹灰之力，只能给出一般性建议。
好的，这里jsfiddle-example 我创建了一个例子。对于最后的页脚，我想达到我在第一篇文章中描述的结果。希望这有助于解决问题。对于我在上一条评论中描述的复制，您必须添加到页脚 css 'width: 800px' 或 'width: 1500px' 例如。
@MikkoOhtamaa 是正确的。这确实实现了 OP 中描述的全角页脚。在 oodoloo 提供的小提琴中，页脚 div 错误地位于主容器 div 内......这就是它不起作用的原因 - 它需要在外面。 container-fluid 页脚中的行很重要，因为这将删除 Bootstrap 添加到 conatiner-fluid 的 15px 左右填充。

【解决方案2】：

为了我的需要，现在我修复了它，就像你在这里看到的那样： jsfiddle-example

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

我在 css 类“.footer”中添加了“width: 100%”、“position: absolute”、“left: 0”和“right:0”。我认为决定性的是“立场：绝对”。然后我必须添加“left：0”，因为左侧没有全尺寸。添加后它确实如此。由于完整性，我添加了“正确：0”。不知道在任何其他浏览器中是否需要它。在这里它也可以没有它。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我这样做是对的：

@media(max-width:500px){

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

}

【讨论】：