引導兩列的100％的高度

Question

我想創建一個兩欄（工具條，主要內容）佈局引導。大量的擺動和谷歌搜索後，我意識到我可以通過應用做到這一點：

html, body { 
    height: 100%; 
} 
.container-fluid{ 
    min-height: 100%; 
    overflow: hidden; 
} 

.sidebar, .content{ 
    margin-bottom: -9999px; 
    padding-bottom: 9999px; 
} 

到我的HTML結構：

<div class="container-fluid"> 
    <div class="row"> 
     <!-- sidebar --> 
     <div class="sidebar col-md-3"><p>Box 1</p></div> 
     <!-- /sidebar --> 
     <!-- main --> 
     <div class="content col-md-9"><p>Box 2</p></div> 
     <!-- /main --> 
    </div> 
</div> 

我的問題是：爲什麼這項工作？它有效，但是推理是什麼？

Answer 1

.sidebar, .content{ 
    margin-bottom: -9999px; 
    padding-bottom: 9999px; 
} 

爲什麼這項工作？它有效，但是推理是什麼？

這是一種小把戲。諸如background-color等文體將應用於填充內，但不包括邊距。所以，這一切正在做的是推動利潤率的出路，並與填充這個空白填補，這樣background-color去一路到屏幕的底部（或含股利或其他）。

還要注意有多麼重要：

.container-fluid{ 
    overflow: hidden; 
} 

是。刪除該行，你會看到所有發生的事情是你正在製作一個超級高的div元素，並在父div中隱藏大部分overflow: hidden。

Here's a fiddle you can play with.注意，如果div的高度變得過於高大的這一招是行不通的。

Answer 2

你可以試試這個：

html, body { 
    height: 100%; 
} 
.container-fluid{ 
    min-height: 100%; 
    overflow: hidden; 
} 

.sidebar, .content{ 
    background-color: red; 
    float: none; 
    display: table-cell; 
    border: 1px solid; 
} 

您添加此CSS：

.sidebar, .content{ 
     background-color: red; 
     float: none; 
     display: table-cell; 
     border: 1px solid; 
    } 

DEMO

Answer 3

你貼是通過與填充擴大的div創建100％高度的錯覺代碼。改變這兩個數字（並添加一些內容），你就會明白髮生了什麼。

根據您計劃放入側邊欄的內容類型，使用列可能會也可能不會有好處，因爲它們會擴展並與視口縮小，並會堆疊在主要內容的頂部（或下面）或者被擠得很小才能使用。看例子。

body, 
 
html { 
 
    position: relative; 
 
    margin-top: 25px; 
 
} 
 
.sidebar-fixed { 
 
    padding: 5px 18px; 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: #f5f5f5; 
 
} 
 
ul.sidebar-list { 
 
    list-style: none; 
 
    display: inline; 
 
    text-align: left; 
 
} 
 
ul.sidebar-list > li { 
 
    font-size: 18px; 
 
    padding-bottom: 25px; 
 
} 
 
ul.sidebar-list > li > a { 
 
    color: #555; 
 
    text-decoration: none; 
 
} 
 
.main-content { 
 
    margin-left: 200px; 
 
} 
 
@media (max-width: 768px) { 
 
    .sidebar-fixed { 
 
    width: 100px; 
 
    } 
 
    .main-content { 
 
    margin-left: 100px; 
 
    padding: 0; 
 
    } 
 
    ul.sidebar-list > li { 
 
    font-size: 14px; 
 
    padding-bottom: 25px; 
 
    } 
 
} 
 
@media (max-width: 360px) { 
 
    .sidebar-fixed { 
 
    display: none; 
 
    } 
 
    .main-content { 
 
    margin-left: auto; 
 
    padding: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="sidebar-fixed"> 
 
    <ul class="sidebar-list"> 
 
     <li> <a href="#"> About</a> 
 
     </li> 
 
     <li> <a href="#"> Contact</a> 
 
     </li> 
 
     <li> <a href="#"> Products</a> 
 
     </li> 
 
     <li> <a href="#"> Blog</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="main-content"> 
 
    <div class="container-fluid"> 
 
     <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
 
     </div> 
 
     <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux 
 
     de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce 
 
     à la vente de feuilles Letraset contenant des passages du Lorem Ipbody { position: relative; margin-top: 125px; margin-bottom: 50px; } .navbar.navbar-custom { border-radius: 0px; border: none; background: #337ab7; border-bottom: 1px solid #ff0; 
 
     } .navbar-custom .upper-nav { font-size: 20px; padding: 9px 20px; height: 50px; color: #337ab7; background-color: #fff; } .navbar-custom .upper-nav img { margin-top: 0px; } .navbar-custom .navbar-nav { margin-right: 30px; } .navbar-custom .nav-buttons 
 
     { border-radius: 0px; background: none; border: none; color: #337ab7; } .navbar.navbar-custom .btn-group .dropdown-menu > li > a { color: #fff; } .navbar.navbar-custom .btn-group .dropdown-menu > li > a:hover { color: #444; } .navbar.navbar-custom 
 
     .navbar-nav > li > a { color: #fff; border: none; } .navbar.navbar-custom .navbar-brand { color: #fff; } .navbar.navbar-custom .dropdown-menu { background: #266080; } .navbar-custom .navbar-nav .open .dropdown-menu > li > a, .navbar-custom .navbar-nav 
 
     .open .dropdown-menu { color: #fff; border: none; } .navbar-custom .navbar-nav .open .dropdown-menu > li >a:hover, .navbar-custom .navbar-nav .open .dropdown-menu:hover { color: #fff; border: none; } .navbar.navbar-custom .navbar-toggle, .navbar.navbar-custom 
 
     .navbar-toggle:focus, .navbar.navbar-custom .navbar-toggle:hover { background: none; outline: none; box-shadow: none; border: none; color: #fff; } .sidebar-fixed { margin-top: 100px; padding: 5px 18px; position: fixed; width: 200px; height: 100%; 
 
     top: 0; left: 0; background: #337ab7; border-right: 1px solid #ff0; z-index: 1500; } ul.sidebar-list { list-style: none; display: inline; text-align: left; } ul.sidebar-list > li { font-size: 18px; padding-bottom: 25px; } ul.sidebar-list > li 
 
     > a { color: #fff; text-decoration: none; } .well { background-color: transparent; border: 3px solid #428bca; border-radius: 0px; text-align: center; font-size: 25px; } .main-content { margin-left: 200px; } .footer { vertical-align: center; position: 
 
     fixed; bottom: 0; width: 100%; height: 50px; background-color: #337ab7; padding: 12px 0; z-index: 3100; } ul.footer-nav > li { margin-top: 5px; list-style: none; vertical-align: center; text-align: right; } ul.footer-nav > li > a { text-decoration: 
 
     none; color: #fff; } @media (max-width: 768px) { .navbar-custom .navbar-nav { margin-right: 0; } .navbar-custom .navbar-nav > li > a { color: #fff; } .sidebar-fixed { margin-top: 104px; width: 100px; } .main-content { margin-left: 100px; padding: 
 
     0; } ul.sidebar-list > li { font-size: 14px; padding-bottom: 25px; } .navbar-custom .navbar-collapse { margin-left: 100px; border: none; } } @media (max-width: 360px) { .sidebar-fixed { display: none; } .main-content { margin-left: 0; padding: 
 
     0; } }sum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum 
 
     est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi 
 
     adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des 
 
     applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p> 
 
     <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux 
 
     de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce 
 
     à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition 
 
     et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a 
 
     pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, 
 
     et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p> 
 
     <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux 
 
     de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce 
 
     à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition 
 
     et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a 
 
     pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, 
 
     et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I End</p> 
 
    </div> 
 
    </div> 
 
</div>