html - CSS:固定/固定顶部菜单栏

Question

我在 SO 上通读了许多关于此的问题，但没有真正找到我要找的东西。我在下面有简单的 HTML 和 CSS 代码。我想要做的是将滚动条仅放在“left_content”DIV 上。正如您现在在示例中看到的那样，它位于“左侧”DIV 上。如果我将 CSS 中的“scroll:auto”从#left 移动到#left_content，则滚动条出现在右侧。这是为什么？以及如何将滚动条放在#left_content 上。谢谢。

<style>
  #left{float:left; width:50%; height:100%; overflow:auto;}
  #right{float:left; width:50%; height:100%;}  
  #left_menu{width:100%;}
  #left_content{width:100%;}
  .clear{clear:both;}
</style>
<div id="left">
  <div id="left_menu">
  menu point 1 | menu point 2 | menu point 3
  </div>
  <div id="left_content">
    1 <br / >2 <br / >3 <br / >4 <br / >5 <br / >6 <br / >7 <br / >8 <br / >9 <br / >10 <br / >11 <br / >12 <br / >13 <br / >14 <br / >15 <br / >16 <br / >17 <br / >18 <br / >19 <br / >20 <br / >21 <br / >22 <br / >
    1 <br / >2 <br / >3 <br / >4 <br / >5 <br / >6 <br / >7 <br / >8 <br / >9 <br / >10 <br / >11 <br / >12 <br / >13 <br / >14 <br / >15 <br / >16 <br / >17 <br / >18 <br / >19 <br / >20 <br / >21 <br / >22 <br / >
    1 <br / >2 <br / >3 <br / >4 <br / >5 <br / >6 <br / >7 <br / >8 <br / >9 <br / >10 <br / >11 <br / >12 <br / >13 <br / >14 <br / >15 <br / >16 <br / >17 <br / >18 <br / >19 <br / >20 <br / >21 <br / >22 <br / >
  </div>
</div>
<div id="right">
 Some other content that is adjusted so that there is no scrolling needed.
</div>
<div class="clear"></div>​

Answer 1

滚动条出现在右侧而不是左侧 div 的原因是您将左侧和右侧的高度都设置为 100%。出现的滚动条不是针对右侧的 div，而是针对正文/文档。

当你有固定的高度时，Overflow css 效果最好。如果您仍然需要 100% 的高度，我们可以包括:

#left { max-height: 500px;}

如果需要设置左边div的高度为窗口高度，可以使用JS。

$('#left').css('max-height',$(window).height());

JSfiddle:http://jsfiddle.net/h4adr4qs/

或者使用新的 css viewport 值:

#left {max-height:100vh;}

我不确定有多少浏览器支持“vh”单位。但我很确定很快就会成为标准。

如果您需要固定菜单但只有#left_content 可以滚动，则需要将最大高度设置为该div，

#left_content { max-height: 500px;overflow:scroll}

如果您这样做，请从#left css 中移除溢出属性