Css Flexbox不能与Aurelia一起正常工作（Webpack初学者工具包）_Css_Flexbox_Aurelia

Css Flexbox不能与Aurelia一起正常工作（Webpack初学者工具包）

css aurelia

Css Flexbox不能与Aurelia一起正常工作（Webpack初学者工具包）,css,flexbox,aurelia,Css,Flexbox,Aurelia,给定一些使用flexbox的非常基本的html，我可以获得一个包含页眉、页脚和内容区域的屏幕，这些区域填充了其中的所有空间： <html> <body style="display:flex;flex-direction:column;flex-grow:1"> <div style="display:flex;flex-direction:row">Header</div> <div style="displa

给定一些使用flexbox的非常基本的html，我可以获得一个包含页眉、页脚和内容区域的屏幕，这些区域填充了其中的所有空间：

<html>
   <body style="display:flex;flex-direction:column;flex-grow:1">
      <div style="display:flex;flex-direction:row">Header</div>
      <div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
      <div style="display:flex;flex-direction:row">Footer</div>
   </body>
 </html>

然而，如果我试图在Aurelia中实现同样的目标（使用webpack初学者工具包），那么身体和内容元素上的增长似乎都会被忽略

index.ejs--附带初学者工具包我在原始文件中添加了样式

<body aurelia-app="main" style="display:flex;flex-direction:column;flex-grow:1">

app.html——对原始初学者工具包文件的更改

<template>
   <div style="display:flex;flex-direction:row;">Header</div>
   <div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
   <div style="display:flex;flex-direction:row;">Footer</div>
</template>


标题
内容区
页脚

我还尝试将flex添加到

当您检查页面时，一切看起来都很好——事实上，看起来几乎与基本html示例完全相同。但是，包含内容区域的

body

和

div

不会增长到页面的高度

我试图得到一个在Plnkr中工作的示例，但它实际上与Aurelia有相同的问题。我注意到它像Aurelia一样使用了

shadow

元素——我猜这可能与它有关吧？

要让它与Aurelia（或单独）一起工作，您应该像这样布局标记


标题
内容区
页脚

因此，如果您获取原始代码，将其粘贴到.html文件中，并在Chrome中打开，它实际上会像我预期的那样显示出来。所以看起来原始代码确实有效。原始代码不按原样工作：。。。它需要身体上的高度来实际填充视口：完美！需要车身上的

高度：100vh

。谢谢

<template>
   <div style="display:flex;flex-direction:row;">Header</div>
   <div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
   <div style="display:flex;flex-direction:row;">Footer</div>
</template>