gpt4 book ai didi

html - 删除 iframe 下方的空白

转载 作者:行者123 更新时间:2023-11-28 01:28:20 24 4
gpt4 key购买 nike

我目前正在尝试在调整大小时删除 iframe 下方的空白区域。我主要使用 Bootstrap for CSS。目标是让 iframe 占据导航栏下方 100% 的页面。

Example of iframe being cut off and white space trailing

这就是我调用 iframe 的方式:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="site/index.html">
<p>Your browser does not support iframes.</p>
</iframe>
</div>

页面中唯一的其他元素是导航栏。

我试过以下方法:将 iframe 更改为显示: block 高度和宽度:100%溢出:隐藏溢出-y:隐藏

谢谢。

最佳答案

  • html 标签使用 h-100 类。
  • 对正文使用 d-flex flex-column h-100
  • embed-responsive 使用 flex-grow-1 以便它占用剩余的可用空间。

<!DOCTYPE html>
<html class="h-100">

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
</head>

<body class="d-flex flex-column h-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<h1 class="mx-auto">iframe</h1>
</nav>
<div class="flex-grow-1 embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://getbootstrap.com/">
</iframe>
</div>
</body>

</html>


你需要使用 bootstrap-4.1

关于html - 删除 iframe 下方的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51126467/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com