引导行高 100% 问题答案

【问题标题】：bootstrap row height 100% issue引导行高 100% 问题
【发布时间】：2017-03-14 21:44:18
【问题描述】：

我正在使用 Twitter Bootstrap 3 框架开发一个项目。

我的基本 HTML 布局是。

侧边栏
主要内容

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

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

.row 的高度疯了。但是如果我在侧边栏使用position: fixed 而不是float: left，那么.row 的高度会根据.row 中的内容进行调整。

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

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

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

我该如何克服它？

谷歌搜索了一下，我找到了this。但这对我没有帮助。

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

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

提前致谢。

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

【问题讨论】：

我对这个问题仍然有些模糊。您希望侧边栏位于左侧和全屏，并且您希望将右侧（深灰色）设置为/到...？
不不。布局中的一切都很完美。但问题是.. .main-content 内的第一个 .row 的高度是 100%。但是我没有将.row 设置为 100%。这是我的问题。
好吧，除非另有说明，否则我很确定子级从父级继承属性，因为row 的父级是main-content，并且由于main-content 是100% 高度，所以@987654345 @。此外，您还有main-content->row 在page-container 的巢中（它们都是父级），其高度也为100%，因此也可以传递。
我该如何克服它？我不希望 .row 达到 100% 的高度。但我希望 .page-contianer、.sidebar 和 .main-content 的高度为 100%。
这就是我之前问的，你希望行高是多少？如果您嵌套项目并且不希望继承属性，那么您需要赋予子项自己的属性。

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

这行不通！原因如下：当您的主要内容的高度高于正文时，两列将具有不同的高度，请尝试在内容 div 中放置更多文本，您会看到 :)

【解决方案2】：

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

【讨论】：

我不想设置它的高度。问题是，您可以在 main-content div 中找到一个分类为 .row 的 div。使用浏览器控制台检查元素并检查该.row div 的高度。它的高度太 100%，我没有定义它。

【解决方案3】：

除非另有说明，否则孩子从父母那里继承属性。

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

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

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

JSFiddle Demo 蓝色是显示div这一行。灰色只是页面的底层背景。

【讨论】：

奥斯汀 - 非常感谢您的回答。但我不想手动设置.row 高度。我希望它根据我为其中的元素指定的高度是动态的。
这有点奇怪，请问为什么？通常您会将您的父级设置为某个站点，然后该站点会动态地将属性应用于所有子级，反之则需要更多的手动工作。您能否添加一些示例代码或视觉（如绘画）参考，以便我可以看到您要完成的工作？
如果是这样的话。 .main-content 的任何孩子的身高都应该是 100% 对吗？但这不会发生，除非我将 div 类指定为.row。仅当孩子拥有 .row 课程时，身高才会达到 100%。
我要看看代码示例，有使用“行”之类的例外。但是查看代码并查看您正在尝试做的事情要容易得多。

【解决方案4】：

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

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

解决方案：为避免覆盖 Bootstrap 框架，只需将 .container 类与另一个样式为 display:flex; 的 div 封装在一起

【讨论】：