更新（第二天早上）

Question

我正在尝试使用flexbox生成以下布局。

顶部黑条，中间部分和底部黑条都是弹性项目，它们是body标签内部的包装div的子项，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
    <link href="~/Styles/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Styles/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Styles/ppt_site.css" rel="stylesheet" />
</head>
<body>
    <div class="wrapper">

        <div id="topRow">
        </div>

        <div id="centralRow">

            <div id="sidebarColumn">
            </div>

            <div id="contentColumn">
            </div>

        </div>

        <div id="bottomRow">
        </div>

    </div>

    @Section['customScripts']
    <script src="~/Scripts/siteGlobals.js"></script>

    <script src="~/requireconfig"></script>
    <script data-main="~/scripts/NewTemplatesAppLoader.js" src="~/requirejs"></script>

</body>
</html>

控制所有这些的样式表如下

.wrapper, html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

#topRow {
    background-color: black;
    color: white;
}

#centralRow {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#bottomRow {
    background-color: #333333;
    color: white;
}

#sidebarColumn {
    background-color: #B83B1D;
    color: white;
}

#contentColumn {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background-color: #F7F7F7;
    color: black;
    padding: 10px;
    overflow-y: auto;
}

就主要布局而言，这一切都很完美，你会注意到，如果你看图像，红色侧边栏作为顶部区域带有黄色边框。

该区域注定是一个div，它延伸了上面CSS中红色区域（Sidebar Column）的整个高度，但是尽可能地尝试我无法做到我所需要的。

理想情况下，我希望它是一个div，这是一个flex容器，然后我可以将4个flex项放入其中，并且每个都占用可用空间的四分之一，但因为带有黄色边框的div似乎无法看到父容器的高度（红色侧边栏，这是一个弹性项目本身）然后它只占用了它内容周围的空间高度。

我已经尝试将它包装在更多的div中并定位这些div，我已经在更多div中包装了更多的flex盒，我尝试了块，内联，表格单元以及我能想到的其他所有内容。 / p>

无论我尝试什么，我似乎都无法让黄色镶边容器与其父母的高度相同。

任何想法？

更新（第二天早上）

这两个提议的解决方案确实可以正常工作，并且它们的工作方式也符合我的期望。

但在我的特定情况下，它们不起作用。

我正在使用NancyFX的超级简单视图引擎，而我正在使用KnockoutJS来构建“Web组件”，这样我就可以让我的作品重复使用了。

如果我编辑我的“主模板”，并将div直接插入标记中，嵌套在#sidebarColumn下面，我可以根据需要获得相同大小的4个div。

然而，实际需要发生的是以下内容，我的模板如下所示：

<div class="wrapper">

    <div id="topRow">
        @Section['topbarContent']
    </div>

    <div id="centralRow">

        <div id="sidebarColumn">
            @Section['sidebarContent']
        </div>

        <div id="contentColumn">
            @Section['bodyContent']
        </div>

    </div>

    <div id="bottomRow">
        @Section['bottombarContent']
    </div>

</div>

如果我删除了“@Section ['sidebarContent']”并将div直接放入其中。

如果我将div直接放在使用模板的“Page”中，如下所示：

@Master['shared/ppt_layout.html']

@Section['topbarContent']
    <toptoolbar></toptoolbar>
@EndSection

@Section['sidebarContent']
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
@EndSection

@Section['bodyContent']
    <h1>Body Content</h1>
    <p class="lead">I am the test page that uses a wide sidebar component</p>
    <p>If you notice however, I also have a top toolbar with title added to me, and a footer bar.</p>
    <p>We all use the same template however....</p>
@EndSection

@Section['bottombarContent']
    <footerbar></footerbar>
@EndSection

@Section['customScripts']
@EndSection

这也有效，但如果我将标记放在一个淘汰组件中，即使只是直接的div在页面中起作用，那么我也会得到我最初注意到的效果。

因此，出于某种原因，添加内容，使用淘汰组件是造成问题的原因。

即使我尝试在组件内部构建一个新的flex布局，但是在垂直方向上没有任何工作，水平但是一切都很完美。

例如，页脚栏分为左侧和右侧部分，没有任何问题，但垂直对齐只是被撤销。

Answer 1

所以，在看似折磨的日子之后，我终于找到了问题所在。

我在我的项目中使用了knockout.js，特别是淘汰组件，这是造成这个问题的障碍。

对于那些之前没有使用过KO组件的人来说，这是一个非常简单的过程。您构建了一个JS视图模型和一小段HTML，以提供组件显示表面。

然后你使用：

ko.components.register("myComponent", {
    viewModel: "Components/myComponent.js",
    template: "Components/myComponent.html"
});

ko.applyBindings();

注册您的组件。

一旦注册了组件，您就可以通过添加

来简单地使用它

<myComponent></myComponent>

您希望在网页中添加它。

现在这一切都很好，但是......当KO实例化组件时，它会自定义标签。

因此，如果你想象你的组件是这样的那样

<div>
    <div>Item...</div>
    <div>Item...</div>
    <div>Item...</div>
    <div>Item...</div>
</div>

，您的网页看起来像

<body>
    <div>
        <myComponent></myComponent>
    </div>
</body>

然后最终输出看起来像

<body>
    <div>
        <myComponent>
            <div>
                <div>Item...</div>
                <div>Item...</div>
                <div>Item...</div>
                <div>Item...</div>
            </div>
        </myComponent>
    </div>
</body>

鉴于上述CSS中的规则，我和两个响应者都是以包装div为目标，规则永远不会与目标div匹配，从而在其上启用flex。

密钥（正如我通过试验和错误发现的那样）是使用自定义标签名称EG：

#sidebarColumn > narrowsidebar {
     width: 70px;
     flex: 1;
     display: flex;
     flex-direction: column;
}

然后从该父级继续进一步的flex操作。

但是，它仍然无法解释为什么当您在组件内部从头开始执行完整的flexbox布局时（即在主网页和/或模板中没有任何弹性操作），它仍然存在垂直问题对齐，据我所知，KO对dom不会造成这种行为。

但是，对于我最初的问题，通过自定义标记进行定位可以让我获得我需要的位置。

辣妹

Answer 2

您可以使用嵌套的flexbox：

<div id="sidebarColumn">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

#sidebarColumn {
  display: flex;
  flex-direction: column;
}
#sidebarColumn > div {
  flex: 1;
}

<强> jsFiddle

Answer 3

对弹性儿童使用.wrapper, html, body { height: 100%; margin: 0; padding:0; } /* header */ #topRow { background-color: black; color: white; height:20%; } /* footer */ #bottomRow { background-color: #333333; color: white; height:10%; } /* main */ #centralRow { height:70%; display: flex; } /* sidebar */ #sidebarColumn { background-color: #B83B1D; color: white; width:20%; display: flex; flex-direction: column; } #sidebarColumn nav { padding:1em; border:1px solid yellow; flex:1; } /* content */ #contentColumn { overflow: auto; flex:1; } .big { border:1px solid red; margin:1em; height:400px; }以使其跨越最大可能空间

＆＃13;

<div class="wrapper">

  <div id="topRow">
    header
  </div>

  <div id="centralRow">
    <div id="sidebarColumn">
      sidebar
      <nav>
        nav links
      </nav>
    </div>
    <div id="contentColumn">
      body content
      <div class="big">some big content</div>
    </div>
  </div>

  <div id="bottomRow">
    footer
  </div>
</div>

＆＃13;

Mysql -> service -> remove service

＆＃13;

https://jsfiddle.net/azizn/y4hag5o3/

在flexbox项目中获得100％高度div

更新（第二天早上）

3 个答案: