側邊欄沒有網頁

我有我的側邊欄不具有網頁的完整高度問題的全部高度。試圖解決這個問題了幾個小時，但不能...有人能告訴我如何解決這個問題？側邊欄沒有網頁

body, html { 
 
    height: 100%; 
 
} 
 

 
.navbar-inverse { 
 
    \t background-color: #455a64; 
 
    \t color: #f7f6f6; 
 
    \t vertical-align: middle; 
 
    \t height: 50px; 
 
    \t line-height: 50px; 
 
    \t font-size: 16px; 
 
    } 
 

 
    nav .col-sm-2 a { 
 
    \t color: #f7f6f6; 
 
    \t margin-left: 40%; 
 
    } 
 

 
    hr { 
 
    \t border-top: 1px solid #aaaaaa; 
 
    } 
 

 
    nav .col-sm-2 a:hover { 
 
    \t color: #ebebeb; 
 
    \t text-decoration: none; 
 
    } 
 

 
.container-fluid .row .col-sm-2 { 
 
\t margin-top: -30px; 
 
\t background-color: #455a64; 
 
\t height: 100%; 
 
} 
 

 
.navbar { 
 
\t margin-bottom: 0; 
 
\t border-bottom: 0; 
 
} 
 

 
.container-fluid .row .col-sm-2 a { 
 
\t color: #ebebeb; 
 
\t font-size: 16px; 
 
} 
 

 
.container-fluid .row .col-sm-2 a:hover { 
 
\t color: #26c6da; 
 
\t text-decoration: none; 
 
} 
 

 
    .active { 
 
    \t color: #26c6da!important; 
 
    \t text-decoration: none; 
 
    } 
 

 
    .glyphicon { 
 
    \t margin-bottom: 30px; 
 
    \t padding-right: 15px; 
 
    } 
 

 
    .glyphicon-menu-right { 
 
    \t float: right; 
 
    } 
 

 
    .glyphicon-menu-left { 
 
    \t float: right; 
 
    } 
 

 

 
    #panel { 
 
    \t margin-top: 20px; 
 
    }

<!DOCTYPE html> 
 
     <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>Creator CRM</title> 
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
     <link href="../css/admin.css" rel="stylesheet"> 
 
     <link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet"> 
 
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet"> 
 
     </head> 
 
     <body> 
 
     <nav class="navbar navbar-inverse navbar-static-top"></nav> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
      <div class="col-sm-2"> 
 
       <hr> 
 
       <a href="../index.html"><span class="glyphicon glyphicon-home"></span> Homepage <span class="glyphicon glyphicon-menu-right"></span></a><br> 
 
       <a class="active" href="index.html"><span class="glyphicon glyphicon-lock"></span> Modules <span class="glyphicon glyphicon-menu-left"></span></a><br> 
 
       <span class="title">Installed modules<hr></span> 
 
       <a href="#"><span class="glyphicon glyphicon-th-list"></span> Users management <span class="glyphicon glyphicon-menu-right"></span></a><br> 
 
      </div> 
 
      <div class="col-sm-10"> 
 
       <div id="panel"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading">Your current plan: <strong>Free</strong> <button class="btn btn-blue">Upgrade your plan to install more modules!</button></div> 
 
        <div class="panel-body"> 
 
L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <script src="../js/jquery.min.js"></script> 
 
     <script src="../js/bootstrap.min.js"></script> 
 
     </body> 
 
    </html>

上面添加我的代碼。對於更大的屏幕，您有可能看不到該錯誤。所以，我在這裏留下一個畫面太：

預先感謝幫助:)

P.S開啓全頁面，以便更好地看問題，因爲它沒有實施，以更小的設備！

來源

2017-05-13 Sprunkas

您可以在父級上使用flex，並從側邊欄中刪除height屬性，因爲默認情況下，高度將「拉伸」以匹配父級的高度。

.flex { 
 
    display: flex; 
 
} 
 

 
body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.navbar-inverse { 
 
    background-color: #455a64; 
 
    color: #f7f6f6; 
 
    vertical-align: middle; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 16px; 
 
} 
 

 
nav .col-sm-2 a { 
 
    color: #f7f6f6; 
 
    margin-left: 40%; 
 
} 
 

 
hr { 
 
    border-top: 1px solid #aaaaaa; 
 
} 
 

 
nav .col-sm-2 a:hover { 
 
    color: #ebebeb; 
 
    text-decoration: none; 
 
} 
 

 
.container-fluid .row .col-sm-2 { 
 
    margin-top: -30px; 
 
    background-color: #455a64; 
 
} 
 

 
.navbar { 
 
    margin-bottom: 0; 
 
    border-bottom: 0; 
 
} 
 

 
.container-fluid .row .col-sm-2 a { 
 
    color: #ebebeb; 
 
    font-size: 16px; 
 
} 
 

 
.container-fluid .row .col-sm-2 a:hover { 
 
    color: #26c6da; 
 
    text-decoration: none; 
 
} 
 

 
.active { 
 
    color: #26c6da!important; 
 
    text-decoration: none; 
 
} 
 

 
.glyphicon { 
 
    margin-bottom: 30px; 
 
    padding-right: 15px; 
 
} 
 

 
.glyphicon-menu-right { 
 
    float: right; 
 
} 
 

 
.glyphicon-menu-left { 
 
    float: right; 
 
} 
 

 
#panel { 
 
    margin-top: 20px; 
 
}

<!DOCTYPE html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Creator CRM</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="../css/admin.css" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-inverse navbar-static-top"></nav> 
 
    <div class="container-fluid"> 
 
    <div class="row flex"> 
 
     <div class="col-sm-2"> 
 
     <hr> 
 
     <a href="../index.html"><span class="glyphicon glyphicon-home"></span> Homepage <span class="glyphicon glyphicon-menu-right"></span></a><br> 
 
     <a class="active" href="index.html"><span class="glyphicon glyphicon-lock"></span> Modules <span class="glyphicon glyphicon-menu-left"></span></a><br> 
 
     <span class="title">Installed modules<hr></span> 
 
     <a href="#"><span class="glyphicon glyphicon-th-list"></span> Users management <span class="glyphicon glyphicon-menu-right"></span></a><br> 
 
     </div> 
 
     <div class="col-sm-10"> 
 
     <div id="panel"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Your current plan: <strong>Free</strong> <button class="btn btn-blue">Upgrade your plan to install more modules!</button></div> 
 
      <div class="panel-body"> 
 
      <div style="height: 200vh"></div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="../js/jquery.min.js"></script> 
 
    <script src="../js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

來源

2017-05-13 15:40:13

啊......我沒看到，如果在面板太少內容，然後邊欄背景沒有網頁的全高..：/（嘗試將面板主體高度改爲20vh） – Sprunkas

側邊欄沒有網頁

回答

相關問題