Question

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

我的基本HTML布局是。

边栏
主要内容

侧边栏元素的高度为100％float: left，因此归类为main-content的div保持内联。

当我给侧边栏浮动左侧属性并在row div中添加main-content分类div时。

.row的高度变得疯狂。但是，如果我使用float: left到侧边栏，则position: fixed高度会根据.row内的内容进行调整，而不是.row。

我确实在Chrome中使用了网络控制台，并注意到在:before行和:after上创建了两个伪元素。

当我取消选中那些伪类的css属性时，.row的高度是孩子的高度。

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

我怎样才能克服它？

谷歌就这一点，我找到了this。但它对我没有帮助。

此外，我创建了一个fiddle来展示.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属性设置列的高度。希望这有点帮助

Answer 3

除非另有说明，否则儿童会从父母继承属性。

因此，让我们为行指定height，它将不再继承。

我要添加的所有内容都是一行height属性，用于覆盖父{q} height属性。

.row {
    background-color:blue;
    height:50%;
}

JSFiddle Demo 蓝色表示行div。灰色只是页面的基础背景。

Answer 4

编辑：当我没有定义时，为什么.row div的高度为100％它的高度？

原因：::before类的::after和.row伪元素的样式为display:table;，从而导致第一行填充尽可能多的剩余空间。

解决方案：为了避免覆盖Bootstrap框架，只需将.container类封装为另一个具有样式display:flex;

的div

bootstrap行高100％问题

4 个答案: