我想用bootstrap创建一个双列（侧边栏，主要内容）布局。经过大量的摆动和谷歌搜索，我意识到我可以通过申请来实现：
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>
我的问题是：为什么这有效？它有效，但是推理是什么？
答案 0 :(得分：1)
.sidebar, .content{
margin-bottom: -9999px;
padding-bottom: 9999px;
}
为什么这样做？它有效，但推理是什么？
这是一种伎俩。像background-color这样的样式将应用于填充内，但不会应用于边距。因此，所有这一切都是推动边缘方式，并用填充填补这个空白，以便background-color一直到屏幕底部（或包含div或其他）。
还要注意重要性：
.container-fluid{
overflow: hidden;
}
是。删除该行，您将看到所有发生的事情是您正在创建一个超高div元素并将其中大部分隐藏在父级div中的overflow: hidden。
Here's a fiddle you can play with.请注意，如果div的高度太高，这个技巧就不会起作用。
答案 1 :(得分：1)
您发布的代码通过使用填充扩展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>
答案 2 :(得分：0)
你可以尝试这个：
?你添加这个css：
html, body {
height: 100%;
}
.container-fluid{
min-height: 100%;
overflow: hidden;
}
.sidebar, .content{
background-color: red;
float: none;
display: table-cell;
border: 1px solid;
}