Html 内容和边栏需要扩展背景，同时保持网格对齐_Html_Css

Html 内容和边栏需要扩展背景，同时保持网格对齐

html css

Html 内容和边栏需要扩展背景，同时保持网格对齐,html,css,Html,Css,我有一个内容侧边栏布局。内容有一种背景色，而侧边栏有另一种，非常简单。您将在所附源代码的.centered exampleelements分支中看到此配置我面临的问题不仅仅是模仿.centered example中的居中内容网格，而是将.content和.sidebar背景“扩展”到视口的边缘（如.wrap left和.wrap right元素中所示），并保持（大部分）响应以下是成品外观的示例：代码如下： <!doctype html> <html> &l

我有一个内容侧边栏布局。内容有一种背景色，而侧边栏有另一种，非常简单。您将在所附源代码的

.centered example

elements分支中看到此配置

我面临的问题不仅仅是模仿

.centered example

中的居中内容网格，而是将

.content

和

.sidebar

背景“扩展”到视口的边缘（如

.wrap left

和

.wrap right

元素中所示），并保持（大部分）响应

以下是成品外观的示例：

代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style>
            .wrap-left{
                width:66%;
                min-height:500px;
                display:inline-block;
                float:left;
                background-color:rgba(0,0,0,0.48);
            }
            .wrap-right{
                width:34%;
                background-color:rgba(172, 172, 172, 0.48);
                min-height:500px;
                display:inline-block;
                float:left;
            }
            .wrap-left .content{
                max-width:693px;
                width:100%;
                height:100%;
                float:right;
                background-color:transparent;
                /*background-color:rgba(0,0,0,0.48);*/
            }
            .wrap-right .sidebar{
                max-width:347px;
                width:100%;
                height:100%;
                float:left;
                background-color:transparent;
                /*background-color:rgba(172, 172, 172, 0.48);*/
            }
            .centered-example{
                width:100%;
                max-width:1040px;
                height:200px;
                background-color:#000000;
                margin:0 auto;
                clear:both;
            }
            .centered-example .content{
                width:66%;
                height:100%;
                float:left;
                background-color:rgba(0,0,0,0.48);
            }
            .centered-example .sidebar{
                width:34%;
                height:100%;
                float:left;
                background-color:rgba(172, 172, 172, 0.48);
            }
        </style>
    </head>
    <body>
        <div class="wrap-left">
            <div class="content">
                This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.
            </div>
        </div>
        <div class="wrap-right">
            <div class="sidebar">
                This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.
            </div>
        </div>
        <div class="centered-example">
            <div class="content"></div>
            <div class="sidebar"></div>
        </div>
    </body>
</html>


无标题文件
.向左包装{
宽度：66%；
最小高度：500px；
显示：内联块；
浮动：左；
背景色：rgba（0,0,0,0.48）；
}
.包好{
宽度：34%；
背景色：rgba（172,172,172,0.48）；
最小高度：500px；
显示：内联块；
浮动：左；
}
.左换行。内容{
最大宽度：693px；
宽度：100%；
身高：100%；
浮动：对；
背景色：透明；
/*背景色：rgba（0,0,0,0.48）*/
}
.右转.侧边栏{
最大宽度：347px；
宽度：100%；
身高：100%；
浮动：左；
背景色：透明；
/*背景色：rgba（172,172,172,0.48）*/
}
.中心示例{
宽度：100%；
最大宽度：1040px；
高度：200px；
背景色：#000000；
保证金：0自动；
明确：两者皆有；
}
.示例.内容{
宽度：66%；
身高：100%；
浮动：左；
背景色：rgba（0,0,0,0.48）；
}
.居中示例.侧栏{
宽度：34%；
身高：100%；
浮动：左；
背景色：rgba（172,172,172,0.48）；
}
这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。
这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧边栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。这是侧栏。

您可以在此处看到实际的示例：

如果需要更多的澄清，请告诉我。任何类似执行的站点示例都有很大帮助。

您可以在包含元素（在本例中为主体）上使用CSS3渐变来伪造扩展背景

*{
保证金：0；
填充：0；
}
身体{
背景：-webkit渐变（线性，100%50%，0%50%，颜色停止（50%），颜色停止（50%，D7D7D7），颜色停止（50%，858585））；
背景：-webkit线性梯度（右，#D7D7D7 50%，#858585 50%）；
背景：-莫兹线性梯度（右，#D7D7D7 50%，#858585 50%）；
背景：-o-线性梯度（右，#D7D7D7 50%，#858585 50%）；
背景：线性梯度（右，#D7D7D7 50%，#858585 50%）；
}
.包装纸{
宽度：1040px；
最小高度：700px；
保证金：0自动；
溢出：隐藏；
}
.内容{
宽度：66%；
浮动：左；
最小高度：700px；
背景#8585；
}
.侧边栏{
宽度：34%；
浮动：对；
最小高度：700px；
背景#D7D7D7；
}


这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容。这是内容