Question

所以我使用了一个名为skeleton的响应式框架，但是，如果有一个页眉和页脚等部分，我希望背景跨越100％的页面宽度，现在这是一种流行的设计选择。< / p>

有没有人为此做一个解决方法只是在容器外面制作div？

Answer 1

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

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

如果容器的位置值为relative，absolute或fixed，则无效。

Answer 2

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;
}

Answer 3

skeleton.css第301行：

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

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

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

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

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

3 个答案: