Flexbox的不Aurelia大街（的WebPack入门套件）正常工作

考虑使用Flexbox的一些非常基本的HTML，我可以achive一个屏幕，页眉，页脚和填充在所有的空间内容区域之间：Flexbox的不Aurelia大街（的WebPack入门套件）正常工作

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

页眉显示在最上方，页脚显示在最下面。

+++++++++++++++++++++ 
+ Header 
+ Content Area 
+ 
+ 
+ 
+ 
+ Footer 
+++++++++++++++++++++++++

但是，如果我努力实现内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>

我也尝试添加柔性到<template style="display:flex;flex-direction:column;flex-grow:1">

一切看起来不错，当你检查页面 - 实际上，看起来几乎完全像基本的html例子。但是，包含内容区域的body和div不会增长以填充页面的高度。

我试图得到一个在Plnkr中工作的例子，但它实际上与Aurelia有相同的问题。我注意到它正在使用shadow元素，就像Aurelia一样 - 我猜这可能与它有关？

来源

2017-09-26 RHarris

所以，如果你把原来的代码，将其粘贴在一个.html文件，并打开它在Chrome中，它实际上会显示为与我预期的一样。所以看起来原来的代码确实有效。 – RHarris

原始代码不能按原样工作：https：//jsfiddle.net/v6spb996/ ...它需要身体上的高度来实际填充视口：https：//jsfiddle.net/v6spb996/3/ – LGSon

对于它与Aurelia大街（或单独）工作，你应该布局类似这样的标记

<body aurelia-app="main" style="height:100vh;margin:0;display:flex;flex-direction:column;"> 
 
    <my-template style="display:flex;flex-direction:column;flex-grow:1"> 
 
    <div style="display:flex;">Header</div> 
 
    <div style="display:flex;flex-grow:1">Content Area</div> 
 
    <div style="display:flex;">Footer</div> 
 
    </my-template> 
 
</body>

其中<template>，如果它得到渲染，必须<my-template>吧工作，因为<template>标记具有特殊含义并且不会以可视方式呈现，请参阅MDN; https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template。

然后body（或任何主要元素）需要一个高度，在这里我使用height:100vh。

也不要请注意，您必须对<body>的flex-grow不适如果不是其父的<html>也有display: flex

来源

2017-09-26 18:27:22 LGSon

完善！需要身体上的“身高：100vh”。谢谢。 – RHarris

Flexbox的不Aurelia大街（的WebPack入门套件）正常工作

回答

相关问题