Удаление пробела ниже iframe - PullRequest
Новая
       3

Удаление пробела ниже iframe

0 голосов
/ 01 июля 2018

В настоящее время я пытаюсь удалить пустое пространство ниже моего iframe при изменении размера. Я в основном использую Bootstrap для CSS. Цель состоит в том, чтобы iframe занимал 100% страницы ниже панели навигации.

Пример обрезки iframe и трейлинга пробелов

Вот как я называю 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>

Единственный другой элемент на странице - это панель навигации.

Я пробовал следующее: Изменение фрейма для отображения: блок высота и ширина: 100% переполнение: скрытый Переполнение-у: скрытый

Спасибо.

1 Ответ

0 голосов
/ 02 июля 2018
  • Используйте h-100 класс для тега html.
  • Используйте d-flex flex-column h-100 для тела.
  • Используйте flex-grow-1 для embed-responsive, чтобы он занимал оставшуюся часть свободного пространства. 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...