Question

我有左导航并且已经溢出页面。
我想要做的是导航无法溢出，但它可以滚动，我的内容<div>不会受到影响。
但我不想使用iframe 有可能吗？

这是我的bootply code link
与此示例类似，但我想要＆＃34; side＆＃34;导航也可以滚动（如果你调整它变小）

<script type="text/javascript">
$(function(){
  $('#sidebar').affix({
   offset: {
     top: $('header').outerHeight(true),
     bottom: $('footer').outerHeight(true)
   }
  });
</script>

<nav class="navbar navbar-default" role="navigation" >
  <ul class="nav nav-stacked" id="sidebar" >
    <?php 
        $groupInfo = $_SESSION['base_u_ldapGroup'];
        // print_r( $groupInfo);
        base_generateMenuBar($groupInfo) 
    ?>
  </ul>
</nav>

Answer 1

另一种方法是使用两个div - 具有不同的溢出设置：

将侧边栏放在父div中。将父div设置为隐藏溢出，将内部div设置为溢出auto。使父div比内部div略微更瘦，以便不显示内部div的滚动条。如果动态创建，只需使用jQuery或其他js设置渲染时的宽度。请注意，以下是一个演示，与你的sizings / sidebar等无关 - 只是为了表明你可以拥有一个没有滚动条的可滚动div。

.parentDiv
    {
        width: 301px;
        height: 450px;
        overflow: hidden;
    }

.parentDiv .innerDiv
    {
        width: 320px;
        height: 450px;
        overflow: auto; 
    }

ps： - 我只是将它们放在一起以显示效果。请注意，它为两个div设置css的宽度。这样的效果不需要JS或JQuery，但动态设置样式规则。或者使用php并在页面加载/渲染时加载宽度。你可以投资＆＃34; calc＆＃34;对于CSS，但我不知道在不同的浏览器中支持的程度如何。或者 - 使用css的百分比，只需使父div除了nner div。

＆＃13;

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <title>Scrollable Div Test</title>
    <meta charset="UTF-8" />
        <style>
    	.parentDiv
        {;
            width: 301px;
            height: 450px;
            overflow: hidden;
        }
    
    .parentDiv .innerDiv
        {
            width: 320px;
            height: 450px;
            overflow: auto; 
        }  
    
        </style>
    </head>
    
    <body>
    
    <div class="parentDiv"/>
    	<div class="innerDiv"/>
  <p>scroll this list<p>
    		<ul>
    			<li>a</li>
    			<li>b</li>
    			<li>c</li>
    			<li>d</li>
    			<li>e</li>
    			<li>f</li>
    			<li>g</li>
    			<li>h</li>
    			<li>i</li>
    			<li>j</li>
    			<li>k</li>
    			<li>l</li>
    			<li>m</li>
    			<li>n</li>
    			<li>o</li>
    			<li>p</li>
    			<li>q</li>
    			<li>r</li>
    			<li>s</li>
    			<li>t</li>
    			<li>u</li>
    			<li>v</li>
    			<li>w</li>
    			<li>x</li>
    			<li>y</li>
    			<li>z</li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>

＆＃13;

Answer 2

在CSS中，设置溢出以在y轴上滚动？

#sidebar{overflow-y:scroll}

或者如果您不希望滚动条一直存在，则将其设置为自动

#sidebar{overflow-y:auto}

Bootstrap：修复左侧导航但能够滚动

2 个答案: