1

Web ページに問題があります。

min-height プロパティを使用して、フッターをページの下部 (コンテンツの長さが足りない場合) とコンテンツの後 (コンテンツがウィンドウより長い場合) に配置しています。この方法を説明するチュートリアルはたくさんありますが、私もこの方法で行いました。

html, body { height: 100%; }
.container { 
    min-height: 100%; 
    position: relative;
}
.footer {
    position: absolute;
    bottom: 0;
}

およびその他のコード。それはうまくいきます。

この問題は、コンテナ div にドロップ シャドウを追加するために 2 つの追加 div を作成すると発生します。私は持っている：

<div class="left-shadow">
    <div class="right-shadow">
        <div class="container">
        ...
        </div>
    </div>
<div>

html と body の高さは 100% のままで、左の影の div の min-height は 100% で、右の影とコンテナーの高さは 100% であると考えました (100% は高さの 100% を意味すると想定しています)。親要素)。

しかし、それは機能しません (Firefox では動作しますが、Chrome では動作します。IE はあまり気にしません)。正しく動作するようにあらゆる種類の組み合わせを試しましたが、うまくいきませんでした。どんな助けでも大歓迎です。

編集：（部分コード）

<html>
    <head>
    ...
    </head>
    <body>
        <div class="left-shadow">
            <div class="right-shadow">
                <div class="container">

                    <div class="header">
                        header content
                    </div>

                    <div class="content" >
                       content goes here
                    </div>


                    <div class="footer">
                        footer content here
                    </div>


                </div> <!-- end container div -->
            </div>
        </div>
    </body>
</html>

そして関連するcss：

html {
    overflow-y: scroll;
    height: 100%;
}

body {
    margin: 0 0 0 0;
    height:100%;
}

.left-shadow
{
    width: 1084px;
    background: url("images/left-shadow.png") repeat-y left; 
    /* both bg images are 30px wide.  1024 + 30 + 30 = 1084px */
    margin: auto;
    min-height: 100%;
}

.right-shadow
{
    width: inherit;
    background: url("images/right-shadow.png") repeat-y right;
    margin: auto;
    height: 100%;
}


.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    width: 1024px;
    height: 100%;
}

編集2:この質問がdoctypeに属していることを知りました。ですから、これからは適切な場所で質問します。しかし、これはすでに始まっているので、質問をどこに投稿すべきかについては言及せずにとにかく回答するようお願いしたいと思います。ありがとう。

4

2 に答える 2

1

まず、CSS を使用して影の効果を作成します。CSS ソリューションが探しているものではない場合は、影を の背景画像として設定してみてください.container。現在、あなたのマークアップは不要な要素によってオーバーロードされています。

しかし、その余分なマークアップがやりたいことを行う唯一の方法である場合は、次のようなことを試してください。

* {
    margin: 0;
    padding: 0;
}

html, body, .shadow, #container {
    min-height: 100%;
}

#container {
    position: relative;
}

#content {
    padding-bottom: 55px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;

    background: #0a0;
}

そして、HTML マークアップ (これらのシャドウ divによって見栄えが悪くなります):

<body>
    <div id="shadow-left" class="shadow">
        <div id="shadow-right" class="shadow">
            <div id="container">
                <div id="content">
                    Page contents
                </div>
                <div id="footer">
                    Footer
                </div>
            </div>
        </div>
    </div>
</body>
于 2010-01-20T21:53:44.697 に答える
0

代わりに、この単純なソリューションを「スティッキー フッター」に使用することを強くお勧めします。問題を取り除くだけです：http://ryanfait.com/sticky-footer/

必要なのは、フッターの固定高さを定義できることだけです。これは、事実上すべての場合に問題にはなりません。

すべての一般的なブラウザで動作します!

于 2010-01-20T23:05:37.307 に答える