CSS将菜单保留在容器中，并将背景扩展到全屏

下面的图片显示了我想要的

它是一个容器中的菜单，当窗口/屏幕太窄，无法容纳所有菜单项时，菜单可能会换行。同时，我希望菜单有一个背景，扩展到全屏幕的宽度，而扩展的高度与菜单时，它被包装到多行。目前我认为这是不可能的CSS，但我也只是一个CSS爱好者。我目前的解决方案是使用@media querys为显示换行的分辨率设置菜单背景的高度。这并没有考虑到字体大小可能会改变，从而使菜单的每一行更高

下面是一个JSFIDLE，它有一个基本的设置，这不是我想要的： （已编辑，不是最终版本）

代码如下：

<div class="container">
  <div class="menu_wrap">
        <div class="menu_bg"></div>
        <div class="menu">
            <ul>
                <li><a href="#">item 1</a></li>
                <li><a href="#">item2</a></li>
                <li><a href="#">item3</a></li>
                <li><a href="#">item4</a></li>
                <li><a href="#">item5</a></li>
                <li><a href="#">item6</a></li>
            </ul>
        </div>
</div>
<div class="content">It's me, Mario!</div>

---

如果您在

容器中更改

     width:50%;

到

它会成功的



您还可以使用
.menu wrap
类（我在您的标记中看到过）来执行此操作
第一个选项是最简单的

不要把
.container
看作必须包含所有内容的东西。它只是一个可以在需要时重用的类

如果您将菜单div从“container”中取出，但将
.container
div放入其中，则会得到您想要的效果



*，
身体{
填充：0；
保证金：0；
}
.集装箱{
宽度：50%；
保证金：0自动；
背景：浅绿色；
}
.菜单{
背景:#afaf ;；
}
保险商实验室{
边框：1px纯绿色；
}
李{
显示：内联块；
}
.内容{
高度：300px；
}















是我，马里奥！
.container{width:85%}
更改此项并see@Abdulla谢谢，但这可能是基于我的第一把小提琴，它没有完成，对不起，所以这不适用于我的情况。是我更新了我的答案谢谢，但容器不能是100%，因为它旨在保持主要内容集中在屏幕上，然后你可以使用另一个包装器，我编辑了小提琴，检查它的输出。看看我编辑过的小提琴，第一个贴出来的还没有完成。容器以屏幕为中心，菜单应尊重容器的边界。最简单的方法是将菜单的内容包装在另一个
中。容器
div谢谢，我也检查了你的最新资料，但这涉及到更改html结构，在这里我正试着用呈现的结构获得解决方案。谢谢，但要么你误解了我，要么你的JSFIDLE没有像我预期的那样工作。请检查这把小提琴：并使结果视图如此狭窄，所有菜单项都在一列中。请查看此图像：。当窗口大小足够小时，两个示例都不会将菜单背景扩展到菜单高度。请尝试从
ul
中删除高度-哇，非常感谢，第二个看起来像我需要的。第一个改变了元素顺序，在我的例子中，html结构来自CMS，我不想改变那个部分。在第二个元素中：before元素显然是：-），谢谢。但是，似乎不可能在保持html结构的同时使用“real”div实现结果。另外，此解决方案调用水平滚动条，而overflow-x:hidden没有帮助。你有什么建议吗？没有，我得考虑一下。
     width:50%;

     width:100%;