如何在不弹出滚动条的情况下填充视口

在不弹出滚动条的情况下填充视口，可以通过以下方法实现：

使用CSS样式设置body和html元素的高度为100%：

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

设置页面内容容器的高度为100%：

.container {
  min-height: 100%;
}

使用flex布局将容器铺满整个视口：

.container {
  display: flex;
  flex-direction: column;
}

设置页面底部footer元素固定在底部：

.footer {
  margin-top: auto;
}

如果容器内有内容超出视口高度，可以使用overflow属性来控制内容的显示方式，如隐藏溢出内容或显示滚动条。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
    
    .header {
      background-color: #f2f2f2;
      padding: 20px;
    }
    
    .content {
      flex: 1;
      padding: 20px;
    }
    
    .footer {
      background-color: #f2f2f2;
      padding: 20px;
      margin-top: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Header</h1>
    </header>
    <div class="content">
      <h2>Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nulla nec odio aliquam feugiat. Donec condimentum turpis et mauris pharetra aliquet. Sed nec ex aliquet, dignissim leo id, vulputate sem. Nullam porttitor iaculis sem vitae semper.</p>
    </div>
    <footer class="footer">
      <h3>Footer</h3>
    </footer>
  </div>
</body>
</html>

在以上示例中，header和footer元素会根据内容的高度自适应，而content元素会自动填充剩余的空间，并且在内容过多时显示滚动条。这样就可以在不弹出滚动条的情况下填充视口。