Question

嘿，对不起这个长标题感到抱歉，但是我需要修复这个问题并且已经有一段时间了。

基本上有一个标题，我想在它下面移动内容。一切都是相对的（保持中心）所以标题有一个上边距，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>

这是小提琴： fiddle

感谢。

Answer 1

这是一个非常基本的示例，说明如何使用固定宽度的居中页面，其中包含固定标题，允许内容在下方流动：

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/

如果对象重叠，嵌套浮动div的父负边距将不会跟随父级

1 个答案: