Question

我实际上正在学习如何使用bootstrap进行编码，并且发生了一些非常奇怪的事情。我想构建一个标题行和中间行的基本模板。中间行必须是背景为灰色，中间为白色（内容为）。中间行有一个flex-grow，因此背景颜色无处不在，不仅仅取决于内容大小。但是当这个内容很大时，它会溢出一行，我无法弄清楚原因。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Potatoe Home</title>
        <link rel="stylesheet" href="path/to/file/file.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body class = "container-fluid">
        <div class = "row titleRow">
            <div class = "col-sm-3">
            </div>
            <div class = "col-sm-6">
                <div id="titleArea">
                    <h1 id="title">Potatoe</h1>
                    <p>blablabla</p>
                </div>
            </div>
            <div class = "col-sm-3">
            </div>
        </div>
        <div class = "row scndRow">
            <div class = "col-sm-3">
            </div>
            <div class = "col-sm-6 middleColumn">
                <div id="testBlock">
                </div>
            </div>
            <div class = "col-sm-3">
        </div>
    </body>
</html>

我的css：

h1[id=title]
{
    font-size: 200%;    
}

.titleRow
{
    background-color: red;
    color: white;
    font-size: 200%;
}

.scndRow
{
    flex-grow: 1;
    display: flex;
    background-color: #D0D0D0;
}

.middleColumn
{
    background-color: white;
}

#testBlock
{
    width: 20%;
    height: 900px;
    background-color: blue;
}

html, body
{
    height: 100%;
}

body
{
    display: flex;
    flex-direction: column;
}

my display

感谢您的帮助

Answer 1

好的问题解决了：我更换了高度：100％的最小高度：100％（对于HTML和身体）

当我设置高度：100％时，chrome认为我希望它是视口的100％。当我的testBlock更大时，它应该使行更大，所以身体。所以身体的高度会超过100％。所以它不能，并且testBlock溢出。

感谢您的帮助：）

Answer 2

如何将flex属性移至课程scndRow呢？并将height:100%设置为必须的元素？

你必须将它指定给scndRow，它将另外两个colunm类包装到这些列中。

.scndRow{
  height:100%;
}

.scndRow .col-sm-3
{
    /*flex-grow: 1;*/
    /*display: flex;*/
    min-height:100%;
    background-color: #D0D0D0;
}

.middleColumn
{
    min-height:100%;
    background-color: white;
}

仅举例来说，我添加了一个jQuery函数，让您在testBlock中看到更多内容的效果。

在updated Fiddle

中查看

阻止溢出的父块

2 个答案: