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

Question

我正在尝试使用 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>

Answer 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>

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

How to fit several iframes into a single page without scrolling?

html

css

getuikit