Question

我想在页面的一角渲染一些离子成分，所以我将它们放在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）中存在错误。

我希望重用页眉/页脚逻辑，我的内容在两者之间是可滚动的。

是否有解决方法？

还有其他实现此功能的Web组件框架吗？

Answer 1

找到了一个CSS解决方案，可能并不完美，但是效果很好。首先，我们找到页眉（clientHeight）和页脚（56px）的48px，然后：

<ion-content class="content">

.content {
  height: calc(100% - 56px - 48px)
}

结果：

在div内时，离子标头和离子标头的离子4高度错误

1 个答案: