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

Question

下图是我想要得到的。

它是一个容器内的菜单，当窗口/屏幕太窄而无法容纳所有菜单项时，菜单可能会换行。同时我希望菜单有一个可以扩展的背景到全屏宽度，同时在菜单被包裹到多行时扩展高度。目前我认为这对于 CSS 是不可能的，但我也只是一个 CSS 业余爱好者。我当前的解决方案涉及@media 查询，以便为出现换行的分辨率设置菜单背景的高度。这没有考虑到字体大小可能会改变，从而使每行菜单更高。

这是一个带有基本设置的 jsFiddle，它不是我想要的: https://jsfiddle.net/n3jmyq2f/3/ (已编辑，不是最终版本)

代码如下:

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

CSS:

.container {
    width:50%;
    margin: 0 auto;
    background:lightgreen;
    height:300px;
}
.menu_bg{
    position: absolute;
    background: #afafaf;
    width: 100%;
    left:0;
    height:30px;
    z-index: -1;
}
ul {
    height:30px;
    background: #afafaf;
}

li {
    display:inline-block;
}

Answer 1

第一个选项是最简单的。

停止将 .container 视为必须包含所有内容 的东西。它只是一个可以在需要时重用的类。

如果您将菜单 div 从“容器”中取出，但将 .container div 放入，您将获得所需的效果。

JSfiddle Demo

*,
body {
  padding: 0;
  margin: 0;
}
.container {
  width: 50%;
  margin: 0 auto;
  background: lightgreen;
}
.menu {
  background: #afafaf;
}
ul {
  border: 1px solid green;
}
li {
  display: inline-block;
}
.content {
  height: 300px;
}

<div class="menu">
  <div class="container">
    <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="container">
  <div class="content">It's me, Mario!</div>
</div>

第二个选项

使用伪元素

*,
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 50%;
  margin: 0 auto;
  background: lightgreen;
  height: 300px;
}
ul {
  background: #afafaf;
  position: relative;
  border: 1px solid green;
}
ul:before {
  content: '';
  position: absolute;
  height: 100%;
  background: inherit;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1
}
li {
  display: inline-block;
}

<div class="container">
  <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 class="content">It's me, Mario!</div>
</div>

JSfiddle Demo