页面包容器中的全宽<header> </header>

时间:2013-06-27 21:51:50

标签: css html5 html position

我正在尝试将页眉元素设置为页面的完整100%宽度。

出于某种原因,标题背景似乎显示100%宽度,但它在“pagewrap”容器中左移。

Live Example

HTML

    <body>

        <!-- start pagewrap -->
        <div id="pagewrap"> 

            <!-- start header -->
            <header>            
            </header>
            <!-- end header -->

        </div>
        <!-- end pagewrap -->   

    </body>

CSS

body {
    width: 100%;
    margin: 0;
}

#pagewrap {
    position: static;
    width: 900px;
    height: 800px;
    margin: 0 auto;
}


header {
    position: absolute;
    width: 100%;
    height: 65px;
    background-color: #F9F9F9;
    border-bottom: thin solid #C6D9F1;
    margin: 10px 0 10px 0;
}

1 个答案:

答案 0 :(得分:2)

left:0px; ...

上使用<header>

在相对定位的容器中找到绝对定位的元素会得到更好的处理。