0

左側の div に 1 つの右側のナビゲーション バーとコンテンツを表示する予定です。同様の質問を検索して解決策を実装しようとしましたが、私の質問に答えていないようです。誰かが私を正しい方向に向けることができれば、とても感謝しています!! :)

更新: http://jsfiddle.net/allenchuang/REWZ4/3/ . これは私がこれまでに持っているものですが、ウィンドウのサイズを変更してスクロールが必要な場合、スクロールバーはブラウザウィンドウの右端ではなく、オレンジ色の div のすぐ隣に表示されます。とにかくそれを回避する方法はありますか？

HTML

<body>
  <div id="page">
    <header id="sidebar">
        <h1>Sidebar (Fixed Width)</h1>

      <nav role="navigation">
        <ul>
          <li><a href="#">Link One</a>
          </li>
          <li><a href="#">Link Two</a>
          </li>
          <li><a href="#">Link Three</a>
          </li>
        </ul>
      </nav>
    </header>
    <article id="contentWrapper" role="main">
      <section id="content">
            <h1>Content (Fluid Width)</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </section>
    </article>
  </div>
</body>
4

2 に答える 2

2 
.span9 {
float: left;
}

.span3 {
float: right;
}
于 2013-01-09T17:27:48.317 に答える
0

このコードを 100% の高さが必要な列に与えるだけです。

span
{
  position:absolute;
  height:100%;
}

また、親要素の高さは 100% にする必要があることに注意してください。通常、次の方法で設定できます。

html, body
{
  width:100%;
  height:100%;
}
于 2013-01-09T20:24:07.470 に答える