gpt4 book ai didi

css - Flexbox 无法与 Aurelia(Webpack 初学者工具包)一起正常工作

转载 作者:行者123 更新时间:2023-11-28 15:19:42 24 4
gpt4 key购买 nike

给定一些使用 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>

页眉显示在顶部,页脚显示在最底部。

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

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

当您检查页面时,一切看起来都很好——事实上,看起来几乎与基本的 html 示例完全一样。然而,bodydiv包含内容区的内容不会增长以填满页面的高度。

我试图在 Plnkr 中找到一个示例,但它实际上与 Aurelia 存在相同的问题。我注意到它正在使用 shadow元素就像 Aurelia 一样——我猜这可能与它有关?

最佳答案

要使其与 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 .

另请注意,flex-grow你在<body>如果不是其父项,则不会应用 <html>还有display: flex

关于css - Flexbox 无法与 Aurelia(Webpack 初学者工具包)一起正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46433179/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com