我想在页面的一 Angular 呈现一些 ionic 组件，所以我将它们放在 div 中，位置为 fixed。这是示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script type="module" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.js"></script>
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
<style>
.container {
position: fixed;
bottom: 10em;
right: 2em;
width: 30%;
height: 30%;
box-shadow: 0 0 0 1em;
}
</style>
</head>
<body>
<div class="container">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list color=danger>
<ion-item color="secondary">Here</ion-item>
<ion-item color="tertiary">Some</ion-item>
<ion-item color="success">Content</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<ion-item color="warning">Footer</ion-item>
</ion-footer>
</div>
</body>
</html>
我得到的行为(div 边界显示为黑色):
当我删除 ion-header 和 ion-footer 时:
认为高度计算存在错误(closest issue)。
我希望重用页眉/页脚逻辑，我的内容在两者之间是可滚动的。
有解决办法吗？
任何其他实现此功能的网络组件框架？
最佳答案
找到一个 CSS 解决方案，可能不完美，但工作正常。首先我们找到页眉(56px)和页脚(48px)的clientHeight，然后:
<ion-content class="content">
.content {
height: calc(100% - 56px - 48px)
}
结果:
关于html - 当在 div 内时， ionic 页眉和 ionic 页脚的 ionic 4 高度错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57122790/