0

こんにちは、次の問題があります。フッターに幅と高さを埋め込みました。この時点まで、フッターには背景色がありませんでした。ここで、フッターを幅全体に広げて背景色を付けることだと思いました。

私の問題は、そのフッターを簡単に「repeat-x」と言うだけの色で塗りつぶす方法がわからないことです。私は私のバックグラウンドでそれをしましたbody。メインページのコンテンツの高さが固定されていないため、簡単にイメージを作成できません。また、この例のフッターが一番下にあることを実現する方法を知りたいですか?

このページでソリューションのサイズを変更したときに、私が何を意味するかを確認できる例を見つけました。

http://razzi.me/tour

これにより、私が何を達成しようとしているのかが明確になることを願っています。私を助けてくれる人がいたら本当にありがたいです。

どうもありがとう。

4

3 に答える 3

1

コードにどのようなレイアウトがあるのか​​正確にはわかりませんが、全幅のフッターとコンテンツを960ピクセルにしたい場合は、レイアウトを次のように設定できます。

<body>
   <div id="header">

       <div class="wrapper">

       </div>

   </div>

   <div id="container" class="wrapper">

       //your container with 960px width

   </div>

   <div id="footer">

       <div class="wrapper">

       </div>

   </div>
</body>
<!-- I suggested to have a wrapper in header and footer so that
     your text or links or whatever you have could be in 960px width
     but your header and footer backgrounds spawns to full-width
-->

そしてCSSは何かになるでしょう：

body { width:100% }

#header, #footer { width:100% }

.wrapper { width:960px }

#footer { clear:both; height:100px; bottom:0; display:block; background-color:#555; }
于 2012-07-16T14:09:45.093 に答える
1

フッターの背景色をウィンドウの幅 100% に拡張したい場合は、メインラッパーの外に移動する必要があります。何かのようなもの：

<div id="mainwrapper">
    stuff goes here
</div>
<div id="footerwrapper">
    <footer>
      Stuff goes here
    </footer>
</div>

次に、CSS で:

#mainwrapper {
    width: 960px;
    margin: 0 auto;
}

#footerwrapper {
    background-color: blue /* or whatever */;
}

footer {
    width: 960px;
    margin: 0 auto;
}
于 2012-07-16T14:11:07.760 に答える
1

この効果を得るには、フッターをラッパーの外に配置する必要があります。私は通常、このスティッキー フッターを使用します。

HTML

<div class="wrapper">
    <div class="push"></div>
</div>
<div class="footer"></div

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
    margin: 0 auto -50px;
    width: 960px;
}
.footer, .push {
    height: 50px;
}

.footer {
    width: 100%;
    background: blue;
}

JS フィドル: http://jsfiddle.net/3KDYX/

于 2012-07-16T14:11:51.940 に答える