3

問題のウェブサイト: christianselig.com

ページの一番下に、「あなたが見ているように？私たちは話すべきです」というメッセージがあります。しかし、何らかの理由で、他のページとは異なり、このページにはフッターが重なっています。

CSS:

.message {
    margin: 150px 0;
    text-align: center;
}

HTML:

            <div class="message">
                <span class="first-part">Like what you see?</span>
                <span class="second-part"><a href="contact.html">We should talk.</a></span>
            </div>

            <div class="footer-wrapper">
                <div class="footer">
                    <p class="copyright">Copyright &copy; 2012 Christian Selig</p>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="#work" class="scroll">Work</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>

.messageご覧のとおり、 CSS で上下の余白を 150px にしたと思っていたのですが、下に食い込んでいる様子はありません。私はそれにパディングを与えることができますが、それは適切な解決策ではないようです。要素がそれほど多くのスペースにまたがってほしくないので、他のものを押し下げたいだけです。

潜在的な理解: 余白はそれをコンテンツから遠ざけますが、そこにはコンテンツがなければなりません。ページの最後の要素なので、押しのけるものは何もないので、パディングが必要でしょうか? これが本当ならもっと良い方法はありますか？

4

4 に答える 4

2

パディングは私にとって素晴らしい作品です：

.message {
    padding: 150px 0;
    text-align: center;
}

http://fiddle.jshell.net/3EYdq/2/show/

于 2012-09-16T00:17:27.620 に答える
1

.personal-info のフロートをクリアしていないため、すべてが少し壊れています

このクリアフィックスを使用できます

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

そしてそれを適用します<div class="personal-info cf">

また、絶対位置ではなくスティッキー フッターを使用することをお勧めします。yckart が言ったように、パディングもこれを行うための良い方法です。

于 2012-09-16T00:31:07.350 に答える
0

あなたから削除position: absolute;してから、あなたdiv.footer-wrapperのマージンを微調整しますdiv.message

.footer-wrapper {
    background: -moz-linear-gradient(center top , #F7F7F7 0%, #D6D6D6 100%) repeat scroll 0 0 transparent;
    border-top: 1px solid #CCCCCC;
    bottom: 0;
    height: 16px;
    overflow: hidden;
    padding: 8px 0 5px;
    width: 100%;
}

パディング on は必要ありません。.messageここでの間違いは、.footer-wrapper必要なく div を絶対配置することです (私が見る限り?)

編集:別の回答で述べたように、クリアは少し面倒です。追加

.wrapper {
    padding-bottom: 1px;
}

迅速な修正が必要な場合に役立つようですが、適切なクリアがはるかに優れています。

また、次のように、ページの上部に doctype を追加することもできます。

<!doctype html>

Web サイトが IE の互換モードでレンダリングされ、表示エラーが増えるためです。

于 2012-09-16T00:16:24.877 に答える
0

これは、フッターが絶対的に一番下に配置されており、たまたまそこにあったものの上に配置されているためです。

50px のようなパディングを下部に追加するだけで、その下に.message余分なスペースができます。

.message {
    margin: 150px 0;
    padding-bottom: 50px;
    text-align: center;
}
于 2012-09-16T00:30:35.977 に答える