Question

我正在处理响应的侧边栏，当单击按钮使其显示时，它会使用过渡效果，并且不会使页面占用页面的宽度或高度超过100％。除了较小的屏幕尺寸外，它的效果很好。然后它占据页面宽度和/或高度的100％以上。

＆＃13;

    $("#sidebar-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

＆＃13;

html {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }

    body {
        height: 100%;
        width: 100%;
    }

    .sidebar-toggle-button {
        margin-left: 15px;
        position: absolute;
        z-index: 2;
        top: 100px;
        display: block;
    }

    #wrapper {
        padding-left: 0;
        transition: all 0.5s ease;
        height: 100%;
    }

    #sidebar-wrapper {
        position: fixed;
        left: 250px;
        width: 0;
        height: 100%;
        margin-left: -250px;
        overflow-y: auto;
        background: black;
        transition: all 0.5s ease;
    }

    #page-content-wrapper {
        height: 100%;
        width: 100%;
        position: absolute;
        padding: 0;
    }

    #wrapper.toggled {
        padding-left: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: absolute;
        margin-right: -250px;
    }

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>
<div id="wrapper">
    <aside id="sidebar-wrapper"></aside>
    <button id="sidebar-toggle" class="sidebar-toggle-button">Toggle</button>
    <div id="page-content-wrapper"></div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

Answer 1

您的calc(100% - 250px)课程中可以使用#page-content-wrapper，一旦您的身体尺寸为250像素。

＆＃13;

    $("#sidebar-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

＆＃13;

html {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }

    body {
        height: 100%;
        width: 100%;
    }

    .sidebar-toggle-button {
        margin-left: 15px;
        position: absolute;
        z-index: 2;
        top: 100px;
        display: block;
    }

    #wrapper {
        padding-left: 0;
        transition: all 0.5s ease;
        height: 100%;
    }

    #sidebar-wrapper {
        position: fixed;
        left: 250px;
        width: 0;
        height: 100%;
        margin-left: -250px;
        overflow-y: auto;
        background: black;
        transition: all 0.5s ease;
    }

    #page-content-wrapper {
        height: 100%;
        width: calc(100% - 250px);
        position: absolute;
        padding: 0;
    }

    #wrapper.toggled {
        padding-left: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: absolute;
        margin-right: -250px;
    }

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>
<div id="wrapper">
    <aside id="sidebar-wrapper"></aside>
    <button id="sidebar-toggle" class="sidebar-toggle-button">Toggle</button>
    <div id="page-content-wrapper"></div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

Answer 2

代码中唯一的变化是：

  #page-content-wrapper {
        left: 0;
    }

    #wrapper.toggled #page-content-wrapper {
        margin-left: -250px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
    html {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }

    body {
        height: 100%;
        width: 100%;
    }

    .sidebar-toggle-button {
        margin-left: 15px;
        position: absolute;
        z-index: 2;
        top: 100px;
        display: block;
    }

    #wrapper {
        padding-left: 0;
        transition: all 0.5s ease;
        height: 100%;
    }

    #sidebar-wrapper {
        position: fixed;
        left: 250px;
        width: 0;
        height: 100%;
        margin-left: -250px;
        overflow-y: auto;
        background: black;
        transition: all 0.5s ease;
    }

    #page-content-wrapper {
        height: 100%;
        width: 100%;
        position: absolute;
        padding: 0;
        left: 0;
    }

    #wrapper.toggled {
        padding-left: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #page-content-wrapper {
        margin-left: -250px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <aside id="sidebar-wrapper"></aside>
        <button id="sidebar-toggle" class="sidebar-toggle-button">Toggle</button>
        <div id="page-content-wrapper"></div>
    </div>

  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
    $("#sidebar-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>
    </body>
    </html>

＆＃13;

使用过渡的响应边栏获得超过100％的宽度和高度

2 个答案: