带有背景图像的响应式标题菜单答案

【问题标题】：Responsive header menu with background image带有背景图像的响应式标题菜单
【发布时间】：2015-09-13 15:55:08
【问题描述】：

我正在尝试创建一个带有背景图像的响应式标题。当我添加画布外菜单汉堡图标时，我会在视口顶部显示一条身体背景。

我做错了什么？

  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
    background: red;
    font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
  }
  .toggle {
    position: absolute;
    right: 0.15em;
    cursor: pointer;
    color: white
  }
  .wrapper {
    max-width: 78.75em;
    margin: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
  }
  .container {
    background: yellow;
    min-height: 100%;
    padding: 0;
    margin: 0
  }
  #header label {
    padding: 0 0.125em;
    font: 2.875em/1.4375em Arial
  }
  #header label:hover,
  #menu label:hover {
    color: grey
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>

<body>
  <!-- red -->
  <div class="wrapper">
    <div id="menu">
    </div>
    <!-- closing "#menu" -->
    <div class="container">
      <!-- yellow -->
      <div id="header">
        <img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="float:left; margin:0 0 0 0; max-width:100%; height:auto; border:0" alt="green box" title="green box">
        <label for="main-nav-check" class="toggle" onclick="" title="Menu">&#x2261;</label>
      </div>
      <!-- closing "#header" -->

      <h1>Test header 4</strong></h1>
      <p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>

    </div>
    <!-- closing ".container" -->
  </div>
  <!-- closing ".wrapper" -->
</body>

</html>

【问题讨论】：

你说的是标题上方的红条？然后在 .container 类中添加溢出：隐藏。
谢谢你，Leo，这似乎是答案。
很高兴我能提供帮助:)

标签： css html responsive-design responsive-images

【解决方案1】：

我认为问题解决了，看看

html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
    background: red;
    font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
  }
  .toggle {
    position: absolute;
    right: 0.15em;
    cursor: pointer;
    color: white
  }
  .wrapper {
    max-width: 78.75em;
    margin: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
  }
  .container {
    background: yellow;
    min-height: 100%;
    padding: 0;
    margin: 0
  }
  #header label {
    padding: 0 0.125em;
    font: 2.875em/1.4375em Arial
  }
  #header label:hover,
  #menu label:hover {
    color: grey
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>

<body>
  <!-- red -->
  <div class="wrapper">
    <div id="menu">
    </div>
    <!-- closing "#menu" -->
    <div class="container">
      <!-- yellow -->
      <div id="header">
        <img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg"  style="max-width:100%; height:auto; border:0" alt="green box" title="green box">
        <label for="main-nav-check" class="toggle" onclick="" title="Menu">&#x2261;</label>
      </div>
      <!-- closing "#header" -->

      <h1>Test header 4</strong></h1>
      <p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>

    </div>
    <!-- closing ".container" -->
  </div>
  <!-- closing ".wrapper" -->
</body>

</html>

【讨论】：

好吧，请检查一下。菜单图标在下一行，而它应该在绿色行..