Html 在flexbox项目中获得100%高度div_Html_Css_Layout_Flexbox

Html 在flexbox项目中获得100%高度div

html css layout

Html 在flexbox项目中获得100%高度div,html,css,layout,flexbox,Html,Css,Layout,Flexbox,我正在尝试使用flexbox生成以下布局顶部的黑色条、中间部分和底部的黑色条都是flex项，它们都是body标记内部的包装器div的子项，如下所示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

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

顶部的黑色条、中间部分和底部的黑色条都是flex项，它们都是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>

就主布局而言，这一切都很完美，但是如果您查看图像，您会注意到，红色侧栏是顶部带有黄色边框的区域

这个区域，注定是一个div，它在上面的CSS中延伸了红色区域（侧边栏列）的整个高度，但是我尽可能地尝试，我无法让它做我需要的事情

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

我试着用更多的div来包装它并定位那些div，我用更多的div来包装更多的flex框，我试过块、内联线、表格单元格以及我能想到的所有东西

无论我怎么做，我似乎都无法使黄色边框的容器与其父容器的高度相同

有什么想法吗

更新（第二天上午）这两个提议的解决方案确实有效，它们本身也有效，正如我所预期的那样

然而，在我的特殊情况下，它们不起作用

我将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>

@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


@第['topbarContent'节]
@第['sidebarContent'节]
@第['bodyContent'节]
@第[‘内容’部分]

如果我删除“@Section['sidebarContent']”并将div直接放入其中，它们就会工作

如果我将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>

@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

@Master['shared/ppt_layout.html']
@第['topbarContent'节]
@端部
@第['sidebarContent'节]
aaa
aaa
aaa
aaa
@端部
@第['bodyContent'节]
身体内容
我是使用宽边栏组件的测试页面
但是，如果您注意到，我还有一个顶部工具栏，其中添加了标题和页脚栏
然而，我们都使用相同的模板
@端部
@第[‘内容’部分]
@端部
@第['customScripts'节]
@端部

这也是可行的，但是如果我将标记放在一个剔除组件中，即使是页面中的直接div，我也会得到我最初注意到的效果

因此，出于某种原因，添加内容、使用淘汰组件正是导致问题的原因

即使我尝试在组件内部构建一个新的flex布局，在垂直方向上什么都不起作用，但在水平方向上一切都很完美

例如，页脚栏被分成左右两部分，完全没有问题，但垂直对齐被取消。

您可以使用嵌套的flexbox：

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

对flex子级使用

flex:1

，使其跨越最可能的空间

.wrapper，html，body{
身高：100%；
保证金：0；
填充：0；
}
/*标题*/
#顶行{
背景色：黑色；
颜色：白色；
身高：20%；
}
/*页脚*/
#底层{
背景色：#333333；
颜色：白色；
身高：10%；
}
/*主要*/
#中央道路{
身高：70%；
显示器：flex；
}
/*边栏*/
#边栏栏{
背景色：#B83B1D；
颜色：白色；
宽度：20%；
显示器：flex；
弯曲方向：立柱；
}
#侧栏导航{
填充：1em；
边框：1px纯黄色；
弹性：1；
}
/*内容*/
#内容栏{
溢出：自动；
弹性：1；
}
.大{
边框：1px纯红；
边缘：1米；
高度：400px；
}


标题
边栏
导航链路
身体内容
一些大内容
页脚

经过几天的折磨，我终于明白了问题所在

我在我的项目中使用knockout.js，特别是knockout组件，正是这些组件之间的障碍导致了问题

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

然后使用：

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

ko.applyBindings();

注册您的组件

一旦注册了组件，您就可以通过放置

<myComponent></myComponent>

然后，从该父级进一步执行flex操作

但是，它仍然没有解释为什么当您在组件内部从头开始进行完整的flexbox布局（即在主网页和/或模板中没有任何flex操作）时，它仍然存在垂直对齐的问题，据我所知，KO对dom没有任何应引起此行为的作用

然而，对于我最初的问题，通过定制标签定位让我达到了我需要的位置

Shawty

好的，所以你提出的解决方案也像我预期的那样独立工作，但在我的项目中不起作用，但我现在有了答案。很高兴看到你明白了这一点，否则其他人可能很难看到那里发生了什么。与其他解决方案一样，这是独立工作的，但拒绝在我自己的项目中工作。

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

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