如何使用CSS将包装元素扩展到完整的浏览器宽度

>本文讨论将CSS元素扩展到居中的页面之外，以填充浏览器窗口，这是一个常见的布局挑战。 当需要有一个全宽标头或页脚时，问题就会出现。 articlewidth: 70%; margin: 0 auto;

在使用A 背景很简单时，页脚由于其内容依赖于中心的

>而构成问题。 一种常见的，尽管在语义上有问题，但解决方案是使用包装器divs：>

body与CSS：article

<article>
    …content…
    <div class="content">
        <p>Footer content.</p>
    </div>
</article>

这增加了不必要的divs。清洁器的跨浏览器解决方案使用填充和负边缘：

footer {
    width: 100%;
    background: url(footer.png) 0 0 repeat-x;
}

.content {
    width: 70%;
    margin: 0 auto;
}

类

，

，

body {
    overflow-x: hidden;
}

.extendfull, .extendleft {
    padding-left: 3000px;
    margin-left: -3000px;
}

.extendfull, .extendright {
    padding-right: 3000px;
    margin-right: -3000px;
}

控制扩展名。

>防止水平滚动。这可以在主要浏览器上进行，但是IE6和IE7需要一个解决方案：> extendleft extendright这可能会影响现代浏览器布局；可能需要调整。extendfull overflow-x: hidden

>经常询问问题（常见问题解答）：

/* IE6/7 fix */
.extendfull, .extendleft, .extendright {
    position: relative;
    display: inline;
    float: left;
    width: 100%;
}

> 然后，本文提供了一个常见问题部分，该部分涉及有关使用CSS创建响应式，居中和风格的全宽栏的常见问题，包括：

响应率：使用

基于视口宽度的单元。

完整的宽度问题：
• 解决或>的填充/保证金冲突。 vw
居中内容：
• 利用CSS Flexbox进行内容对齐。 body>背景和边界：html添加背景颜色，边框，渐变，阴影和填充。
• 粘性条：>使用
在滚动上进行固定定位。
• 过渡：
将过渡效果应用于平滑的动画。
• >本文通过重申提供的解决方案并突出其优势和潜在缺点来结束。

以上是如何使用CSS将包装元素扩展到完整的浏览器宽度的详细内容。更多信息请关注PHP中文网其他相关文章！