0

我计划在左侧 div 上显示一个右侧导航栏和内容。我尝试搜索提出的类似问题并尝试实施解决方案，但他们似乎没有回答我的问题。如果有人能指出我正确的方向，我将不胜感激！！:)

更新：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 回答