0

ええ、長いタイトルで申し訳ありませんが、これを修正する必要があり、しばらくの間それを続けてきました。

基本的にヘッダーがあり、その下にコンテンツを移動したいと思います。すべてが相対的であるため（中央に配置されたまま）、ヘッダーにはマージントップ、z-index、ecc があります。

ページは相対的で負の余白があり、ネストされたフローティング列が含まれており、ヘッダーを超えて上がらず (ダムミット)、その理由を理解できません。

可能であれば、絶対配置の使用は避けたいと思います。コードは次のとおりです。

<div class="header wrapper-standard">
    <div class="logo">
        <div class="inside">hello</div>
    </div>
    <div class="menu-wrapper-outer">asda</div>
    <div class="clear"></div>
</div>
<div class="about-page wrapper-standard notop">
    <div class="about-page content">
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>
        <div class="about-block wrapper-long">
            <div class="col col-left text-first">
                asda
            </div>
            <div class="col col-right">
                lol
            </div>
            <div class="clear"></div>
        </div>                   
    </div>
</div>

これがフィドルです： フィドル

ありがとう。

4

1 に答える 1

0

これは、コンテンツが下に流れるようにする固定ヘッダーを持つ固定幅の中央ページを作成する方法の非常に基本的な例です。

CSS:

<style type="text/css">
    .wrapper{
        height:600px;
        margin:0 auto;
        width:400px;
        background-color:#0ff;

    }
    .header_wrapper {
        position:fixed;
        background-color:#ffd800;
    }        

    .header {
        width:400px;
        background-color:#f00;
        height:100px;
    }
    .page {
        padding-top:100px; /*height of header*/
    }    
</style>

HTML:

<body>
    <div class="wrapper">
        <div class="header_wrapper">
            <div class="header">Header</div>
        </div>
        <div class="page">
            Content will be here bla bla etc
        </div>
    </div>
</body>

これが機能していることを確認できるように、ここにフィドルがあります：http://jsfiddle.net/JjBG5/1/

于 2013-11-14T13:32:54.870 に答える