如何解决如何使用Twitter Bootstrap构建2列固定-流体布局?
可以使用下面的CSS以及从Twitter Bootstrap文档页面获取的经过 稍微 修改的HTML代码来实现固定流体结构:
HTML
<div class="container-fluid fill">
<div class="row-fluid">
<div class="fixed"> <!-- we want this div to be fixed width -->
...
</div>
<div class="hero-unit filler"> <!-- we have removed spanX class -->
...
</div>
</div>
</div>
CSS
/* CSS for fixed-fluid layout */
.fixed {
width: 150px; /* the fixed width required */
float: left;
}
.fixed + div {
margin-left: 150px; /* must match the fixed width in the .fixed class */
overflow: hidden;
}
/* CSS to ensure sidebar and content are same height (optional) */
html, body {
height: 100%;
}
.fill {
min-height: 100%;
position: relative;
}
.filler:after{
background-color:inherit;
bottom: 0;
content: "";
height: auto;
min-height: 100%;
left: 0;
margin:inherit;
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
我将答案保留在下面-即使支持2.0的编辑使其成为一种流体解决方案-因为它解释了使边栏和内容具有相同高度的背后的概念(如注释中所指出,这是问者问题的重要部分)
重要
下面的答案是流体
为确保主要内容至少填充屏幕高度的100%,我们需要将html
和的高度设置body
为100%,并创建一个新的css类.fill
,其最小高度为100%:
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
然后,我们可以将.fill
类添加到需要占用屏幕高度100%的任何元素中。在这种情况下,我们将其添加到第一个div中:
<div class="container-fluid fill">
...
</div>
确保补充工具栏和内容列具有相同的高度是非常困难且不必要的。取而代之的是,我们可以使用::after
伪选择器添加一个filler
元素,该元素会给人以错觉,即两列的高度相同:
.filler::after {
background-color: inherit;
bottom: 0;
content: "";
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
为了确保.filler
元素相对于.fill
元素定位,我们需要添加position: relative
到.fill
:
.fill {
min-height: 100%;
position: relative;
}
最后将.filler
样式添加到HTML:
<div class="container-fluid fill">
<div class="row-fluid">
<div class="span3">
...
</div>
<div class="span9 hero-unit filler">
...
</div>
</div>
</div>
- 如果需要页面左侧的元素作为填充符,则需要更改
right: 0
为left: 0
。
解决方法
如何使用Twitter Bootstrap构建2列(固定-流体)布局?
你有什么解决方案?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。