Html 引导行高 100% 问题

bootstrap row height 100% issue

提问by Unknown User

I'm working on a project using the framework Twitter Bootstrap 3.

我正在使用框架 Twitter Bootstrap 3 处理一个项目。

My basic HTML layout is.

我的基本 HTML 布局是。

• Sidebar
• Main content

• 侧边栏
• 主要内容

The sidebar element has 100% height and float: leftso that the div classed main-contentstays inline.

侧边栏元素具有 100% 的高度，float: left因此分类的 divmain-content保持内联。

When I give the sidebar float left property and add a rowclassed div in main-contentdiv.

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

The height of .rowgoes crazy. But instead of float: leftif I use position: fixedto the sidebar then the .rowheight gets adjusted according to content inside the .row.

的高度.row变得疯狂。但是，float: left如果我使用position: fixed侧边栏，则.row高度会根据.row.

I did play with the web console in Chrome and noticed that there are two pseudo elements created on row :beforeand :after.

我确实在 Chrome 中使用了 web 控制台，并注意到在 row:before和:after.

When I unchecked the css property of those pseudo classes the height of the .rowis to the height of the child.

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

Why do I have this issue when I use float: leftto the sidebar?

为什么我在使用float: left侧边栏时会出现这个问题？

How can I overcome it?

我怎样才能克服它？

Did google on this, and I found this. But it doesn't help me.

对此进行了谷歌搜索，我发现了这个。但这对我没有帮助。

Also I've created a fiddleto demonstrate the strange behaviour of the .rowclassed div where it extends to almost to screen of the height but there's nothing present inside the .rowelement.

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

Someone help me to get this clarified and fixed.

有人帮我澄清和解决这个问题。

Thanks in advance.

提前致谢。

---

---

EDIT : Why the height of the .rowdiv is 100% when I didn't define it's height?

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

回答by Charles Ingalls

I find your mark-up a bit odd considering you are working with Bootstrap. Why don't you make use of the Bootstrap functionality to create your sidebar and main content div? This way you also don't run into unwanted "100% height divs".

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

Have a look: http://jsfiddle.net/GeA7N/3/

看看：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>

回答by user3349049

Have you tried using http://www.layoutit.comas a guide for a layout? You don't have to register to use it. Once you get the columns setup correctly you can go in and and set the height of the columns with the style attribute on the div. Hope this helps a little bit

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

回答by Austin

Children inherit attributes from parents, unless otherwise specified.

除非另有说明，否则子项从父项继承属性。

So let's specify a heightfor row and it will no longer inherit.

所以让我们指定一个heightfor 行，它将不再继承。

All I am adding is a row heightattribute to overwrite both the parent's heightattribute.

我添加的只是一个行height属性来覆盖父级的height属性。

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

JSFiddle DemoBlue is to show the row div. The grey is just the underlying background of the page.

JSFiddle DemoBlue 是显示行div。灰色只是页面的底层背景。

回答by MPaul

EDIT : Why the height of the .row div is 100% when I didn't define it's height?

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

Reason:The ::beforeand ::afterpseudo-elements of the .rowclass have the style display:table;thereby causing your first row to fill as much remaining space as it can.

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

Solution:To avoid overriding the Bootstrap framework, simply encapsulate your .containerclass with another div which has the style display:flex;

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