Html 页脚宽度不符合预期_Html_Css

Html 页脚宽度不符合预期

html css

Html 页脚宽度不符合预期,html,css,Html,Css,我只是在玩弄一些响应性的网页设计实践，但我不明白我的页脚到底出了什么问题/所以我有一个宽度设置为100vw的flexbox#页脚和一个宽度为900px的第二个div容器，但这个宽度不是网页浏览器中显示的宽度？可能是一些非常基本的东西，但它已经困扰我太久了！全文如下： #页脚{ 宽度：100vw；高度：150像素；背景色：#3b505b；显示器：flex；证明内容：中心；对齐项目：居中； } .footer容器{ 最大宽度：900px；显示器：flex；证明内容：之间的空间；对

我只是在玩弄一些响应性的网页设计实践，但我不明白我的页脚到底出了什么问题/所以我有一个宽度设置为100vw的flexbox#页脚和一个宽度为900px的第二个div容器，但这个宽度不是网页浏览器中显示的宽度？可能是一些非常基本的东西，但它已经困扰我太久了！全文如下：

#页脚{
宽度：100vw；
高度：150像素；
背景色：#3b505b；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.footer容器{
最大宽度：900px；
显示器：flex；
证明内容：之间的空间；
对齐项目：；
}

我有。。。第二个div容器，宽度：900px

实际上，它有

最大宽度：900px

，这是非常不同的。如果自然宽度超过900，则仅强制宽度为900

由于

display:flex

元素的子元素的宽度仅为适合其内容所需的宽度，因此除非您告诉它（或者如果您用足够的内容填充它），否则它永远不会超过900

为此，除了您的

最大宽度

之外，还应用

flex:1

（或

width:100%

）

#页脚{
宽度：100vw；
高度：150像素；
背景色：#3b505b；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.footer容器{
弹性：1；
最大宽度：900px；
显示器：flex；
证明内容：之间的空间；
}