Bootstrap 3 left close bar 100% height with container-fluid
Bootstrap 3 left close bar 100% height with container-fluid
我正在尝试为这样的页面创建一个布局,其中包含一个全高左侧关闭栏。我将 运行 保留在左侧的关闭栏中,要么将所有内容向下推,要么仅限于左上角:
如果你想让侧边栏全高你可以使用
.sidebar{
height:100vh;
}
然后你可以给position:fixed;
我想你想要这样的东西。
body {margin:0;}
.side {
position: fixed;
background: blue;
top: 0;
left: 0;
bottom: 0;
width: 100px;
}
.content {
padding-left: 100px;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
.top {
height: 100px;
width: 100%;
background: orange;
float: left;
}
.left, .right {
width: 50%;
height: 200px;
float: left;
}
.left {
background: green;
}
.right {
background: magenta;
}
<div class="side"></div>
<div class="content">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>
我正在尝试为这样的页面创建一个布局,其中包含一个全高左侧关闭栏。我将 运行 保留在左侧的关闭栏中,要么将所有内容向下推,要么仅限于左上角:
如果你想让侧边栏全高你可以使用
.sidebar{
height:100vh;
}
然后你可以给position:fixed;
我想你想要这样的东西。
body {margin:0;}
.side {
position: fixed;
background: blue;
top: 0;
left: 0;
bottom: 0;
width: 100px;
}
.content {
padding-left: 100px;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
.top {
height: 100px;
width: 100%;
background: orange;
float: left;
}
.left, .right {
width: 50%;
height: 200px;
float: left;
}
.left {
background: green;
}
.right {
background: magenta;
}
<div class="side"></div>
<div class="content">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>