使用Bulma CSS实现无滚动条视口页面、内嵌SVG自适应缩放的问题求教

AI 小北

2026-10-15

问题根因

你给body设置的行内height属性不生效，且body默认自带margin，加上100vh高度后会直接导致页面溢出出现滚动条
#scene_parent容器没有限制溢出，也没有设置布局规则让内部SVG居中适配，内容会撑开容器高度
SVG仅设置了height="100%"，未设置width="100%"，无法同时适配容器的宽高限制

调整后的HTML结构（全Bulma原生类实现）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  <title>My Tool</title>
</head>
<body class="is-flex is-flex-direction-column vh-100 m-0">
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <!-- navbar details elided -->
  </nav>
  <div class="container is-fluid is-flex-grow-1 is-flex-shrink-1 is-flex is-align-items-center is-justify-content-center overflow-hidden p-0" id="scene_parent">
    <!-- inline svg element is added here programmatically -->
  </div>
</body>
</html>

修改说明：

body移除行内height属性，改用Bulma原生vh-100类设置高度为视口高度，加m-0清除默认边距
#scene_parent新增is-flex、is-align-items-center、is-justify-content-center实现内部SVG居中，加overflow-hidden限制内容溢出，加p-0清除container默认内边距避免额外空间占用

调整后的SVG生成代码

const svg = `
  <svg id="picture" width="100%" height="100%" viewBox="${vb['min-x']} ${vb['min-y']} ${vb.width} ${vb.height}" preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0 ${middle}) scale(1 -1) translate(0 ${-middle})">
      ${polyOne}
      ${polyTwo}
    </g>
  </svg>`;

修改说明：