css - 换页容器内的全宽 <header>

标签 css 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;
}

最佳答案

使用left:0px;<header> ...

当在相对定位的容器中找到绝对定位的元素时,可以更好地处理。

关于css - 换页容器内的全宽 &lt;header&gt;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17353835/

相关文章:

html - 在 LI 元素中显示水平滚动条并强制水平溢出

javascript - 如何使用更严格的限制自定义 `&lt;input&gt;` 元素

html - 与容器中的段落垂直居中对齐。

css - 当它的 child 长大时,如何使 html div 扩展?

css - HTML & CSS 如何防止 div 扩展到窗口的高度?

css - 我无法更改 <a> 的宽度而不使其 float 或阻塞

jquery - 使用 JQuery 创建滑动时间轴

css - 在 node.js 应用程序中切换 CSS 主题

html - 如何在 Edge 浏览器中删除表格单元格之间的空白

html - 平板电脑/手机中的错误,css 100vh 高度不起作用