bootstrap行高100%问题

Question

我正在使用Twitter Bootstrap 3框架开展项目.

我的基本HTML布局是.

• 侧边栏
• 主要内容

侧边栏元素具有100%的高度,float: left因此div级别main-content保持内联.

当我给侧边栏浮动左边属性并row在main-contentdiv中添加一个入级div.

.row疯狂的高度.但是,float: left如果我使用position: fixed侧边栏,则.row根据内部的内容调整高度.row.

我做了在Chrome Web控制台玩,发现有一行上创建两个伪元素:before和:after.

当我取消选中那些伪类的css属性时,.row它的高度是子节点的高度.

当我使用float: left侧边栏时,为什么会出现此问题？

我怎么能克服它？

谷歌对此,我发现了这一点.但它对我没有帮助.

此外,我创造了一个小提琴来演示.row分类div 的奇怪行为,它几乎延伸到高度的屏幕,但.row元素内部没有任何东西.

有人帮我澄清并修复了这个问题.

提前致谢.

---

编辑:.row当我没有定义它的高度时,为什么div 的高度是100%？

Answer 1

考虑到你正在使用Bootstrap,我发现你的标记有点奇怪.为什么不使用Bootstrap功能来创建侧边栏和主要内容div？这样你也不会遇到不需要的"100%高度div".

看看:http://jsfiddle.net/GeA7N/3/

<div class="page-container">
    <div class="row">
        <div class="sidebar col-xs-4">
        </div>
        <div class="main-content col-xs-8">
            <div class="well custom-well"></div>
            <div style="background: red">Content div that is not 100% height by default</div>
        </div>
    </div>
</div>

Answer 2

您是否尝试过使用 http://www.layoutit.com作为布局指南？您无需注册即可使用它。一旦正确设置了列，您就可以进入并使用 div 上的 style 属性设置列的高度。希望这会有所帮助