html - Div 在容器外流动 - 有可能吗？

Question

所以我使用了一个名为骨架的响应式框架，效果很好，但是，对于页眉和页脚等部分，我希望背景跨越页面的 100% 宽度，这现在是一种流行的设计选择。

有没有人有一个解决方法只是为了让一个 div 在容器外弹出？

Answer 1

假设容器具有默认位置属性（静态），您可以给标题一个position:absolute. 然后设置top:0和。left:0right:0

确保将容器的上边距或内边距设置为为标题定义的相同高度。

如果容器已被赋予相对、绝对或固定的位置值，这将不起作用。

Answer 2

骨架.css 第 301 行：

.container:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

此声明将确保容器之后显示的任何内容都不可见，因此不会以任何方式破坏页面上的网格。

该容器也设置为 960px 宽和position:relative（skeleton.css 第 24 行），这意味着您无法在容器 div 内创建任何可以设置为页面宽度的内容，而无需使用 javascript（为简单起见 + jquery）。在大多数网站上如此关键的设计功能上，依靠它并不是一个好主意。

我会尝试删除 .container 上的 :after 声明，然后在<div>下面添加一个新的width:100%; height:128px;，看看它如何影响您的网格作为起点。

Answer 3

Try this:
body {
font-family: 'Open Sans',sans-serif;
font-size: 0.875em;
overflow-x: hidden;
}
.header-container {
background-color: #CCCCCC;
float: left;
height: 100px;
margin-left: -400px;
overflow: hidden;
padding-right: 800px;
width: 100%;
}
#header {
margin-left: 409px;
margin-top: 10px;
text-align: center;
}