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放入单个页面？

1 个答案: