0

数時間の無駄遣いの後、問題の解決策を見つけることができたので、問題は「方法」ではなく、「なぜそのように機能するのか」です。これが私の簡素化された例です：

<div id="header">
    <div id="header-element">header</div>
</div>
<div id="footer">footer</div>​

CSS:

#header {
    width: 100%;
    position: relative;
    padding-bottom: 5%;
}
#header-element {
    position:absolute;
    bottom: 0;
}
#footer {
    position: relative;
    margin-top: 5%;
}​

そして jsFiddle - http://jsfiddle.net/H7jwm/3/。

私の問題は、パーセンテージを使用して相対的に配置された要素をどのように配置するかでした。私はpadding-bottom最初のものとmargin-top2番目のものに与えることによってそれを達成しましたが、私は力ずくで解決しなければなりません - すべてのリモートで論理的な解決策を試します. ここで、パディングを削除するmargin-topと、2 番目の要素は、最初の要素ではなく、その要素とドキュメントの上部の間のマージンになり、最初の要素は残りのスペースを上部に「取り」ます。

問題は、なぜそのパディングがそのように機能するのかということです。または、言い換えると、パディングは相対位置でどのように機能しますか?

4

1 に答える 1

0

実際、あなたはポジションを混ぜています。あなた#headerの高さはゼロです。そうです、相対コンテンツがないため、何もないようなゼロです。#header-elementは絶対配置され#headerており、高さが 0 であるため、たまたま正確にパディング下部のスペースにあります。

そのため、 から padding-bottom を削除すると、 はドキュメントの一番上から上#headerに#footer移動します。margin-top のため、ドキュメントの上部の境界線と「フッター」という単語の間にはスペースがあります。

しかし、あなたはまだ絶対に配置された を持っています#header-element。これは今、そのマージントップスペースにあります.

于 2012-05-29T13:42:44.457 に答える