1

全幅フッターが欲しいウェブサイトを作っています。しかし、現在は次のようになっています。ここに画像の説明を入力してください

私はそれをこのように見せたいのですが：

ここに画像の説明を入力してください

私が使用しているのがcssであるかどうかはわかりませんが、次のとおりです。

あなたはここで完全なcssとhtmlを見ることができます：http： //jsfiddle.net/Mzmtv/

フルウェブサイトバージョンの場合：lrch.harisonbh.com

/*I'm not sure if this is possible or not, with using the floating divs*/

基本的に、2番目の図にあるものと同様に存在するフッターdivが必要です。ありがとう

4

4 に答える 4

3

注：以下のデモとコードは、ご要望に応じたフッター専用です。

コード： http： //jsfiddle.net/Mzmtv/3/

デモ： http： //jsfiddle.net/Mzmtv/3/embedded/result

以下のhtml構造の挿入

<div class="body">
    <div class="footer">
        &copy;<!--?php echo date("Y") ?--> Little Rock Central High     <a href="#top"><p>Back To Top</p></a>
    </div>
</div>

これを使用する必要があります：

<div id="footer_container">
    <div class="footer">
        &copy;<!--?php echo date("Y") ?--> Little Rock Central High     <a href="#top"><p>Back To Top</p></a>
    </div>
</div>

CSS：

#footer_container {
    clear: both; 
    margin-top: 194px; 
    z-index: 1; 
    width: 100%; 
    background: #333333;
}

.footer {
  padding: 10px;
  color: #ffffff;
}

スクリーンショット： ここに画像の説明を入力してください

于 2013-02-19T18:01:26.987 に答える
2

交換

<div class="body">
    <div class="footer">
        &copy;Little Rock Central High<a href="#top"><p>Back To Top</p></a>
    </div>
</div>

と：

<div class="clear"></div>
<div class="footer">
    &copy;Little Rock Central High<a href="#top"><p>Back To Top</p></a>
</div>

どこ

.clear {
 clear: both;
}
于 2013-02-19T15:39:08.330 に答える
0

あなたが与えたアドレスは機能しません。最も可能性の高い問題に基づいて回答を提供します。

DIVを使用していると言ったので、私を混乱させるフッター「th」があるとおっしゃいました。私はあなたがdivを使用していると仮定し、それに応じて答えます。

  1. divをメインラッパーdivの外側（すべてのコンテンツの下および最も可能性の高いタグ内）に配置します

  2. のスタイル設定を持つ要素をコードに配置しますclear:both。たとえば、次を使用できます。

    <br style="clear:both;" />

  3. フッターdivに100％の幅を置きますwidth:100%;

于 2013-02-19T15:34:12.243 に答える
-2

moarネストされたdivを使用する

<body>
    <header>
        <div id="head-inner" style="width: 920px;">
            <a href="#">Little Rock High School</a>
        </div>
    </header>
    <div class="body-inner" style="width: 100%; background-color: #ccc">
        <div class="container" style="width: 920px; background-color: #fff; margin: 0 auto;">
            <p>Content</p>
        </div>
    </div>
    <footer>
        <div class="footer" style="width 100%; background-color: #222;">
          <p>Footer stuff</p>
        </div>
    </footer>
</body>
于 2013-02-19T15:33:24.077 に答える