web-dev-qa-db-ja.com

Bootstrapフッター、ページの全幅

joomlaでウェブサイトをデザインしていて、bootstrapフレームワークを使用しています。フッターに問題があります。基本的に、単純なグリッドレイアウトを使用しており、サイトのコンテンツ部分が必要です。すでに達成した左側と右側にスペースがあるページの中央。そして今、私はフッターをコンテンツのように中央ではなく、ページの端とその幅全体に配置し、固定しないようにしたいのです。通常はページを下にスクロールして、最後にフッターが全幅で表示されるようにします。長い間検索しましたが、うまくいく解決策が見つかりませんでした。誰かがそれを達成するのを手伝ってくれることを願っています...

以下は、私が使用した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;
}

よろしく、oodoloo

twitter-bootstrapfooter
7
oodoloo

フッターを分離することができます<div class="container">メインコンテンツコンテナの後。次に、メインコンテンツの場合のように、フッターの幅を制限しないコンテナクラスを割り当てることができます。例えば。：：

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

私のニーズのために、ここで見ることができるように今私はそれを修正しました： 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
oodoloo

私はこれを行い、それは正しいです：

@media(max-width:500px){

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

}
0
Cristian