Question

我有一个页面，我正在尝试通过Flutter中的WebView呈现页面。

页面的高度为100 vh（在CSS中），当尝试在我的应用程序中呈现此页面时，应用程序栏会覆盖页面的上部。我相信这是由于页面具有100vh。

我想知道是否有人知道如何处理这种情况并迫使页面以较小的高度呈现，以便应用程序栏不会覆盖页面的顶部。

编辑：要清楚，这是其他人的网页，我无法编辑他们的CSS。

谢谢。

Answer 1

您可以使用calc（）方法。如果知道应用栏的高度，则可以按以下方式设置高度：

现在假设应用栏的高度为65px。然后，您将使用以下CSS行：

config/local.js

如果可能的话，我建议使用min-height属性。当您的应用程序屏幕变大时，其大小会随着内容的长度而增加：

/**
 * Created by pang on 7/10/2016.
 */
'use strict';
var fs = require('fs');

module.exports = {

  /**
   * The default fallback URL to Kong's admin API.
   */
  kong_admin_url: process.env.KONG_ADMIN_URL || 'http://localhost:8001',// 'http://gluu.local.org:8001',


  connections: {
    postgres: {
      adapter: 'sails-postgresql',
      host: process.env.DB_HOST || 'localhost',
      user: process.env.DB_USER || 'postgres',
      password: process.env.DB_PASSWORD || 'admin',
      port: process.env.DB_PORT && parseInt(process.env.DB_PORT) || 5432,
      database: process.env.DB_DATABASE || 'konga',
      poolSize: process.env.DB_POOLSIZE && parseInt(process.env.DB_POOLSIZE) || 10,
      ssl:  process.env.DB_SSL && JSON.parse(process.env.DB_SSL.toLowerCase()) || false
    }
  },

  models: {
    connection: process.env.DB_ADAPTER || 'postgres',
  },

  session: {
    secret: process.env.SESSION_SECRET || '' // Add your own SECRET string here
  },

  ssl: {
    key: fs.readFileSync(process.env.SSL_KEY_PATH || 'key.pem'),
    cert: fs.readFileSync(process.env.SSL_CERT_PATH || 'cert.pem')
  },
  hookTimeout: process.env.HOOK_TIMEOUT && parseInt(process.env.HOOK_TIMEOUT) || 180000, // miliseconds
  port: process.env.PORT && parseInt(process.env.PORT) || 1338,
  environment: 'development',
  log: {
    level: process.env.LOG_LEVEL || 'info'
  },
  ggHost: process.env.GG_HOST || 'gluu.local.org',
  oxdWeb: process.env.OXD_SERVER_URL || 'https://localhost:8553',
  opHost: process.env.OP_SERVER_URL || 'https://ce-dev6.gluu.org',
  oxdId: process.env.OXD_ID || '05e3bf4e-7631-4afa-a6ff-a46acc98c52b',
  clientId: process.env.CLIENT_ID || '063701b0-05fa-40ca-bf73-d160377fd1dd',
  clientSecret: process.env.CLIENT_SECRET || '63e6ebf7-9f2d-48fc-8ece-3b8af0ad10fa',
  oxdVersion: process.env.OXD_SERVER_VERSION || '4.1',
  ggVersion: process.env.GG_VERSION || '4.1',
  postgresVersion: process.env.POSTGRES_VERSION || '10.x',
  explicitHost: process.env.EXPLICIT_HOST || '0.0.0.0',
  ggUIRedirectURLHost: process.env.GG_UI_REDIRECT_URL_HOST || 'gluu.local.org',
};

希望这会有所帮助！

如何应对100vh的抖动？

1 个答案: