我正在尝试使用 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>最佳答案
我通过制作自己的网格解决了这个问题，因为我无法使用 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>关于html - 如何在不滚动的情况下将多个 iframe 放入单个页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55322782/