javascript - 这个侧边栏的高度是如何计算的？

Question

我的目标是无垂直滚动 100% 响应高度。对于我的生活，我无法弄清楚这个侧边栏高度是如何计算的。无论我使用何种尺寸的屏幕，它都超过了页面的高度。 CSS 中唯一的高度设置是 height:100%

    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    $("#menu-toggle-2").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled-2");
        $('#menu ul').hide();
    });

    function initMenu() {
        $('#menu ul').hide();
        $('#menu ul').children('.current').parent().show();
        //$('#menu ul:first').show();
        $('#menu li a').click(
            function () {
                var checkElement = $(this).next();
                if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                    return false;
                }
                if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                    $('#menu ul:visible').slideUp('normal');
                    checkElement.slideDown('normal');
                    return false;
                }
            }
        );
    }
    $(document).ready(function () { initMenu(); });

/* Toggle Styles */
.navbar
{
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

#wrapper
{
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow: hidden;
}

    #wrapper.toggled
    {
        padding-left: 250px;
        overflow: hidden;
    }

#sidebar-wrapper
{
    z-index: 1000;
    position: absolute;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow: hidden;
    /*overflow-y: hidden;*/
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper
{
    width: 250px;
}

#page-content-wrapper
{
    position: absolute;
    /*padding: 15px;*/
    width: 100%;
    overflow-x: hidden;
}

.xyz
{
    min-width: 360px;
}

#wrapper.toggled #page-content-wrapper
{
    position: relative;
    margin-right: 0px;
}

.fixed-brand
{
    width: auto;
}
/* Sidebar Styles */

.sidebar-nav
{
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 2px;
    color: #fff;
}

    .sidebar-nav li
    {
        text-indent: 15px;
        line-height: 40px;
    }

        .sidebar-nav li a
        {
            display: block;
            text-decoration: none;
            color: #999999;
        }

            .sidebar-nav li a:hover
            {
                text-decoration: none;
                color: #fff;
                background: rgba(255,255,255,0.2);
                border-left: red 2px solid;
            }

            .sidebar-nav li a:active,
            .sidebar-nav li a:focus
            {
                text-decoration: none;
            }

    .sidebar-nav > .sidebar-brand
    {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
    }

        .sidebar-nav > .sidebar-brand a
        {
            color: #999999;
        }

            .sidebar-nav > .sidebar-brand a:hover
            {
                color: #fff;
                background: none;
            }

.no-margin
{
    margin: 0;
}

@media (min-width:768px)
{
    #wrapper
    {
        padding-left: 250px;
    }

    .fixed-brand
    {
        width: 200px;
    }

    #wrapper.toggled
    {
        padding-left: 0;
    }

    #sidebar-wrapper
    {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper
    {
        width: 250px;
    }

    #wrapper.toggled-2 #sidebar-wrapper
    {
        width: 0;
    }

        #wrapper.toggled-2 #sidebar-wrapper:hover
        {
            width: 250px;
        }


    #page-content-wrapper
    {
        /*padding: 20px;*/
        position: relative;
        /*-webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;*/
    }

    #wrapper.toggled #page-content-wrapper
    {
        position: relative;
        margin-right: 0;
        padding-left: 250px;
    }

    #wrapper.toggled-2 #page-content-wrapper
    {
        position: relative;
        margin-right: 0;
        margin-left: -200px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: auto;
    }
}


.sidebar-section-container
{
    padding: 8px;
}

    .sidebar-section-container p
    {
        font-size: 12px;
        text-align: right;
    }

        .sidebar-section-container p label
        {
            display: inline-block;
            vertical-align: middle;
        }

        .sidebar-section-container p span
        {
            display: inline-block;
            vertical-align: middle;
            width: 90px;
        }

    .sidebar-section-container .sidebar-price
    {
        width: 70px;
    }

.sidebar-section-top
{
    border-bottom: 1px solid #a9a9aa;
    padding: 0 0 10px;
}

.sidebar-section-middle
{
    border-bottom: 1px solid #a9a9aa;
    padding: 10px 0;
}

.sidebar-section-bottom .btn-primary
{
    width: 110px;
    margin: 10px 0;
    position: relative;
    z-index: 999;
}

.sidebar-section-bottom p
{
    padding: 10px 0 0;
    font-weight: bold;
    font-size: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
<body>
<nav class="navbar navbar-default no-margin">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header fixed-brand">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">
            <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
        </button>
        <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i>Couture | Book</a>
    </div>
    <!-- navbar-header-->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active">
                <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button>
            </li>
        </ul>
    </div>
    <!-- bs-example-navbar-collapse-1 -->
</nav>
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
            
            <li class="active">
                <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span>Dashboard</a>
                <ul class="nav-pills nav-stacked" style="list-style-type: none;">
                    <li><a href="#">link1</a></li>
                    <li><a href="#">link2</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>Shortcut</a>
                <ul class="nav-pills nav-stacked" style="list-style-type: none;">
                    <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li>
                    <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li>

                </ul>
            </li>
            <li>
                <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a>
            </li>
            <li>
                <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a>
            </li>
            <li>
                <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a>
            </li>
            <li>
                <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a>
            </li>
            <li>
                <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid xyz">
            The Body
        </div>
    </div>
 </body>
 </html>

Answer 1

只需将此添加到您的@media

#sidebar-wrapper{
    height: calc(100vh - 58px);   /* Where 58 is the exact height of the top bar */
}

(尽管如此，当菜单调整大小时会出现随机滚动条(谁在乎 :) 这并不是用户调整浏览器大小以使用网站或应用程序操作)但它会让你走上正确的轨道)