Question

我有一个带有选项卡导航栏的Bootstrap模板，其中标签内容由iframe提供。

我想避免将选项卡中的内容滚动到导航栏下方。我想坚持使用导航栏底部边距。当内容使用javascript操作#链接到iFrame中的页面顶部时，会发生这种情况。

这就是我的模板的样子：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>API Docs</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css.map" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" ></script>   
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style> 
            html, body {
                margin: 0;
                padding: 0;
            }
            .container-fluid {
                overflow-y: scroll;
                width: 100%;
            }
            .tab-content {
                margin-top: 60px;
                overflow-y: scroll;
            }
            .subnavbar {
                overflow: hidden;
                min-height: 40px !important;
            }
            .row-floating {
                overflow-y: scroll;
                height: 100%;
                transform: translateZ(0) !important;
                -webkit-transform: translateZ(0) !important;
            }
            .navbar-brand img {
                padding-bottom: 5px;
                width: 24px;
                height: 24px;
                border-radius: 3px;
            }
        </style>
    </head>
    <body id="body">
        <nav class="subnavbar navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
                <a class="navbar-brand" href="/" rel='home'>
                    <img class="hidden-xs" src="/assets/logo.png">
                </a>
            </div>
            <ul class="nav nav-tabs navbar-center">
                <li role="presentation" class="active" ><a href="#panel_track" name="panel_api" data-toggle="tab">API</a></li>
            </ul>
        </nav>
        <div class="container-fluid container">
            <div class="tab-content col-md-offset-0 col-md-12">
                <!-- panel_track -->
                <div class="tab-pane active" id="panel_track">
                    <div class="row-fluid">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="item.html"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </body>
</html>

我尝试过使用

body {
 overflow: hidden
}

这会阻止正文滚动，但是当点击iframe中的锚点时，页面仍会向上滚动到顶部，导致部分内容被导航栏隐藏。

Bootstrap避免在导航栏

0 个答案: