Bootstrap 如何避免右侧滚动条与顶部导航条重叠(引导程序)？

bcs8qyzn 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(203)

我有一个网站，导航栏固定在顶部，导航栏在左侧。当需要滚动网站时，右侧的滚动条与顶部的导航栏重叠。我希望导航栏从顶部导航栏下方开始。我用一个问题的例子做了一个调整
https://jsfiddle.net/jsmnsLm7/（请将窗口放大，以便您可以看到我的导航栏设置的所有功能）
这是我在小提琴中也有的代码（但是stackoverlow强迫我在这里也放代码......我认为在小提琴中更容易）

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>
<div class="container">
    <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation" style="width: 180px; position: fixed;">
            <br><br><br>
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">item0</a></li>
                <li><a href="#">item1</a></li>
                <li><a href="#">item2</a></li>
                <li><a href="#">item3</a></li>
            </ul>
        </div>
        <!--/span-->
        <div class="col-sm-9 col-md-10 main" style="margin-left: 180px;">      
        </div>
    </div>
</div>

我看到之前在stackoverflow上有人讨论过这个问题，他们建议增加position：固定到容器的css。然而，当我这样做的时候，左边的导航栏会固定到页面的最左边。我希望左边的导航栏是灵活的，并且与顶部的导航栏同步（如小提琴的例子所示）谢谢你的帮助最好的卡尔

twitter-bootstrap

来源：https://stackoverflow.com/questions/31497996/how-to-avoid-that-the-scroll-bar-on-the-right-overlaps-with-the-top-navbar-boot

4条答案

按热度按时间

eiee3dmh1#

@Tasos隐藏正文溢出的解决方案是一个很好的开始，但是使用javascript设置高度在浏览器调整大小事件上不能正常工作，至少在Chrome 59上是这样（document.height是now deprecated）。
如果在main上使用position:absolute、top和bottom，则应设置：https://jsfiddle.net/vvsp60ya/
第一个

赞(0）回复(0）举报 2022-12-07

vyswwuz22#

首先你需要通过设置overflow:hidden;告诉body不要使用滚动条。然后你需要把.main向下移动50px，因为这是标题的高度，并告诉它滚动overflow-y: scroll;。但是.main需要设置一个高度，为此，您需要一些Jquery代码来计算窗口的可用高度减去标题高度。

演示版

https://jsfiddle.net/ksroccd8/

CSS

body {
overflow:hidden;
}
.main {
  margin-top: 50px;
  overflow-y: scroll;
}

代码

//get window height minus 50 pixels for the headers height
var height = $(window).height() - 50;

$(".main").height(height);

当你调整窗口大小时，你需要重新计算.main的高度，为此你将需要窗口调整大小功能来添加

代码

window.onresize = function(event) {
var height = $(window).height() - 50;

$(".main").height(height);
};

演示版

https://jsfiddle.net/a88n0aet/

赞(0）回复(0）举报 2022-12-07

rxztt3cl3#

我建议对@Tasos的解决方案稍作修改。

$(document).ready(function() {
    $(window).resize(function() {
        resize();
    }); 
    function resize() {
        var myheight = $(window).outerHeight(true) - 50;
        $('.main').outerHeight(myheight);
    }
    resize();
});

赞(0）回复(0）举报 2022-12-07

sqserrrh4#

.navbar {
  width: calc(100vw - 20px);
}

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何避免右侧滚动条与顶部导航条重叠(引导程序)？

4条答案

相关问题

热门标签

最新问答