0

私が達成したいことは非常に単純です

  • ドキュメントを下にスクロールしても移動しない固定位置の要素が一番上にあります。
  • 後は div#content で、ウィンドウの上端と中央からいくつかのマージントップがあります。

コードは次のとおりです 。html

<div class='head-container' id="headerCom">
    <header id="a"></header>
</div>
<div id="content" role="main"></div>

CSS 

 * {
        margin: 0;
        padding: 0
    }
    body {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .head-container {
        position: fixed;
        top:0;
        left:0;
        width: 100%;
        height: 100px;
        background: red;
        _position:absolute; // make the ie6 support the fixed position
        _top: expression(eval(document.documentElement.scrollTop)); // make the ie6 support the fixed position
    }
    header {
        display: block;
        width: 960px;
        height: 100px;
        margin: 0 auto;
        position: relative;
        zoom: 1;
        background: blue;
    }
    #content {
        border: 1px solid black;
        margin: 130px auto 0 auto;
        width: 960px;
        height: 1000px;
        background: #999;
        margin-top: 150px;
    }

最新のブラウザはすべて十分にサポートされていますが、ie(ie7、ie8、ie10) では正しく動作しません。div#content; に設定したマージントップを無視するのと同じです。

これまでのところ、スタックオーバーフローに関する他の質問をチェックアウトしており、できる限りのことを試しています。

  • div#content の margin-top を padding-top に変更すると、問題ありません。

  • div.header-container と div#conetent の間に div.clear(clear:both) を配置すると、問題はなくなります。

  • または、 hasLayoutが原因であるという他の質問の解決策に従い、div#content の幅と高さを取り出します。これも問題ありませんが、この方法では、別の div#inner-content を配置する必要がありますdiv#content 内で、幅と高さを設定して結果を確認します。

だから私はhasLayoutにかなり混乱しています。それが何であるかを完全に理解しているかどうかはよくわかりません。私のコードで何が起こっているのかよくわかりません。

それで、実際にこれについて私を助けることができますか、この問題を解決し、この有線のことを私に説明できる他の解決策はありますか?

とにかくありがとうございました。

4

1 に答える 1