0

背景画像付きのレスポンシブ ヘッダーを作成しようとしています。オフキャンバス メニューのハンバーガー アイコンを追加すると、ビューポートの上部に体の背景の帯が表示されます。

私は何を間違っていますか？

  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>

4

1 に答える 1

0

問題は解決したと思います、見てください

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>

于 2015-09-13T07:55:08.870 に答える