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添加特定高度，例如：

#left { height: 300px; }

请注意，您无法在此处使用百分比。像素，Ems或任何特定单位都可以使用。现在让左边的内容占据其中的一部分，并告诉它滚动：

#left_content { 
    height: 90%;
    overflow: scroll;
}

这就是它。在此示例中效果很好：http://jsfiddle.net/kubqrvrk/5/

Answer 2

右侧出现的滚动条背后的原因仅代表左侧div，因为您将左右两侧的高度设置为100％。出现的滚动条不适用于正确的div，而是适用于正文/文档。

当您拥有固定高度时，溢出css效果最佳。如果您仍然需要100％的高度，我们可以包括：

#left { max-height: 500px;}

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

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

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

或使用新的css视口值：

#left {max-height:100vh;}

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

如果您需要固定菜单但只需要#left_content滚动，则需要将max-height设置为该div，

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

如果您这样做，请从#left css

中删除overflow属性

CSS：固定/固定顶部菜单栏

2 个答案: