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入門套件）正常工作

回答

相關問題