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

我读过很多关于这个问题的问题，但没有真正发现我在找什么。我有下面的简单的HTML和CSS代码。我想要做的只是把滚动条放在“left_content”DIV上。正如您现在在示例中看到它在“左”DIV上所示。如果我将CSS中的“scroll：auto”从#left移动到#left_content，则滚动条出现在右侧。这是为什么？以及如何将滚动条放置在#left_content上。谢谢。CSS：固定/固定顶部菜单栏

<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>

来源

2014-11-15 Sandor

是这样的吗？ http://jsfiddle.net/kubqrvrk/ –

'
'已弃用。使用替代品 –

谢谢。我正在寻找的是#left_content的其他地方没有滚动条。 – Sandor

滚动条出现在右侧而不是左侧div的原因是您已将左右两侧的高度设置为100％。出现的滚动条不是用于正确的div，而是用于body/document。

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

#left { max-height: 500px;}

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

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

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

或者使用新的CSS视域值：

#left {max-height:100vh;}

我不知道有多少浏览器都支持 'VH' 单位。但我很确定很快就会成为标准。

如果您需要的菜单固定，但只#left_content滚动，你需要在最大高度设置为DIV，

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

如果你这样做，从#left CSS删除overflow属性

来源

2014-11-15 02:32:25 Giri

你需要做的是一个特定的高度添加到左侧DIV，例如第一件事：

#left { height: 300px; }

请注意，您不能在这里使用百分比。像素，Ems或任何特定的单位将工作。现在让左边的内容占据一部分，然后让它滚动：

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

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

来源

2014-11-15 02:21:25 JakeParis

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

回答

相关问题