Question

我正在使用可折叠的侧边栏在内容区域中使用固定页眉和页脚进行布局。目前它运作良好，但有一些小怪癖，我似乎无法弄清楚。

当侧边栏切换为关闭时，正文内容会捕捉到100％的宽度，并在底部显示滚动条，直到它完成折叠。我希望内容要么像边栏一样有宽度补间，要么只有overflow-x隐藏，所以它根本不显示滚动条。
我希望页脚是动态高度。我将根据数据库查询加载不同的内容，我拉的条目数将决定页脚的高度。目前它锁定在60px。

至于第一个问题，我尝试将overflow-x hidden添加到各种元素中但没有成功。第二个问题有点复杂。我已经尝试了一些CSS calc（）操作，但到目前为止还没有任何工作。

这是我的代码，如果你想测试它，你需要 bootstrap.min.css ， bootstrap.min.js 和 jquery。 JS 即可。我尝试设置Codepen或Bootply示例，但它不适用于可折叠侧边栏。

HTML

<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Calendar</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/frame.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <header>header</header>
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">

                        <h1>Simple Sidebar</h1>
                        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
        <footer>footer</footer>
    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
        $("header").toggleClass("toggled");
        $("footer").toggleClass("toggled");
    });
    </script>

</body>

</html>

CSS（来自Frame.css）

/* Header Footer Styles */
header {
    width: 100%;
    height: 60px;
    background: red;
    position: fixed;
    top: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
header.toggled {
    width: calc(100% - 250px);
}

footer {
    width: 100%;
    height: 60px;
    background: red;
    position: fixed;
    bottom: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
footer.toggled {
    width: calc(100% - 250px);
}

/* Toggle Styles */

#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;
}
#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    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;
    overflow-x: hidden;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    margin-top:60px;
    max-height: calc(100% - 120px);
    overflow-y: auto;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
    width: calc(100% - 250px);
}

/* Sidebar Styles */

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

.sidebar-nav li {
    text-indent: 20px;
    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);
}

.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;
}

Answer 1

有点hacky，但对于问题1，您可以尝试将以下内容添加到您的点击功能中：

$("body").css("overflow-x", "hidden");
setTimeout(function(){$("body").css("overflow-x", "auto");}, 1500);

对于问题2，你可以删除高度。

更新：抱歉，我认为我误解了问题2.我能想到的唯一解决方案（再次有点黑客）是让jquery计算并在页面加载时设置它：< / p>

$(document).ready(function() {
  var currentFooterHeight = $('footer').css('height');
  var newContentHeight = 'calc(100vh - 60px - ' + currentFooterHeight + ')';
  $('#page-content-wrapper').css('height', newContentHeight);
})

Updated Bootply

带有可折叠侧边栏的Bootstrap固定页眉和页脚

1 个答案: