如何在不滚动的情况下将多个 iframe 放入单个页面？答案

【问题标题】：How to fit several iframes into a single page without scrolling?如何在不滚动的情况下将多个 iframe 放入单个页面？
【发布时间】：2019-03-28 15:17:16
【问题描述】：

我正在尝试使用 uikit css 框架创建一个单页桌面站点，该框架将包含一堆 iframe（视频）。效果很好，除非视频数量超过我的浏览器大小时，我会得到一个滚动条。以我目前的设置，无论浏览器大小如何，我是否可以让所有这些 iframe 都适合页面？

这是代码（任何尝试过的人都应该可以在本地正常工作）

<html>

<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
</head>

<body>

<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<nav class="uk-navbar uk-navbar-container uk-navbar-transparent uk-padding-small">
 <div class="uk-navbar-left">
  <a href="" uk-icon="icon: menu"></a>
 </div>
</nav>
</div>

<div class="uk-flex-wrap uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-flex-center uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 </div>

</body>
</html>

【问题讨论】：

标签： html css getuikit

【解决方案1】：

我通过制作自己的网格解决了这个问题，因为我无法使用 UIKit 来解决这个问题。它是 100% 响应式的，并且无论大小、列或行如何，网格的内容都保留在浏览器的可视区域内。

这是一个例子：

.wrapper {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}

<div class="wrapper">
<div>
  <iframe
  src="..."
  height="100%"
  width="100%"
  allowfullscreen="true">
  </iframe>
</div>
<div>
  <iframe
  src="..."
  height="100%"
  width="100%"
  allowfullscreen="true">
  </iframe>
</div>
</div>

【讨论】：

我认为使用 uikit 是可行的，请查看 getuikit.com/docs/utility#responsive-objects 和 getuikit.com/docs/cover#iframe