Bootstrap 3 - Заполните область с Iframe 100%

Я изменяю пример Dashboard и пытаюсь полностью заполнить область страницы iframe, чтобы она простиралась до края, но у меня возникают проблемы с этим.

В основном у меня есть nav, sidebar и я хочу полностью заполнить область страницы iframe, но она создает край по горизонтали и не растягивает iframe по вертикали.

Кто-нибудь знает, как я могу заполнить всю область? Если страница уменьшена, она также должна работать в ответном виде, если это возможно.

Изменить: проблема связана с загрузкой, я думаю, возможно, мне нужно перезаписать некоторый CSS или изменить настройку столбца?

Изменить 2: Хорошо. Я ответил на свой вопрос, и теперь, после добавления нового правила CSS и корректировки кода начальной загрузки, он растягивает всю область, но есть небольшая граница/граница, которую мне теперь нужно избавиться из, если я использую абсолютное, это делает iframe уходить со страницы вправо, а не идти прямо к краю, любые идеи о том, как я могу использовать всю область? Я немного новый для Bootstrap, поэтому мне, вероятно, просто нужно немного подкорректировать или что-то в этом роде.

Мой текущий код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="resources/favicon.ico">

    <title>Website</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/dashboard.css" rel="stylesheet">

<style type="text/css">
    body,html,.main-display-area,.col-md-10 {
        height:100%;
    }
</style>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Website</a>
        </div>

      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="">Overview</a></li>
            <li><a href="">Reports</a></li>
            <li><a href="">Analytics</a></li>
            <li><a href="">Export</a></li>
            <li><a href="">Nav item</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
          </ul>
        </div>
      </div>

<div id="frame" class="col-md-10 col-md-offset-2 main">
    <iframe src="http://www.w3schools.com" id="frame" frameborder="0" style="width: 100%; height: 100%;"></iframe>
</div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Ответ 1

У меня возникла проблема с тем, что iframe не принимает высоту 100%. Смотрите эту тему.

Решение состоит в использовании style="position:absolute;" в iframe.

Ответ 2

Для чего это стоит, это сработало для меня

<div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <iframe style="width: 100vw;height: 100vh;position: relative;" src="https://example.com" frameborder="0" allowfullscreen></iframe>
        </div>
</div>

Ответ 3

100% высота означает 100% доступной высоты. Поскольку ничего не происходит, этого достаточно для отображения iframe.

Вам нужно заставить что-то открыть контейнер указанного iframe, чтобы иметь всю доступную высоту страницы, так что высота 100% сделает то, что вы хотите, заполните все это пространство.

Это раздражающая проблема = p

Я часто решаю с помощью javascript, фиксируя высоту видового экрана и вручную устанавливая высоту контейнера на необходимую высоту. Просто будьте осторожны, чтобы не устанавливать его больше, или вы получите боковую полосу прокрутки, так как она будет переполняться. Если вы хотите попробовать, вот функция, которую я использую для получения размеров окна (видового экрана). Вот ваш HTML (я удалил материал, чтобы сделать его меньше, но я полностью его протестировал)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- links might vary, my folder is different. Also, adding these at the end for "speed" is bs, it often causes scripts to fail -->
    <script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
  </head>
  <body>   
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Website</a>
        </div>
      </div>
    </nav>    
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="">Overview</a></li>
            <li><a href="">Reports</a></li>
            <!-- ... -->
            <li><a href="">Another nav item</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-md-10 main">
        <!-- note: you should not add the offsets, removed them. Also note this is inside the row, your original wasan't -->
            <iframe id="iframeid" src="http://www.google.com" style="width:100%; height:100%;margin:0px;border:0px"></iframe>
        </div>
      </div>  
    </div>
    <script type="text/javascript">
        function windowDimensions() { // prototype/jQuery compatible
        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE or IE 9+ non-quirks
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 5- (lol) compatible
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
        }
        if (myWidth < 1) myWidth = screen.width; // emergency fallback to prevent division by zero
        if (myHeight < 1) myHeight = screen.height; 
        return [myWidth,myHeight];
    }
    var dim = windowDimensions();
    myIframe = $('#iframeid'); // changed the code to use jQuery
    myIframe.height((dim[1]) + "px");
    </script>
  </body>
</html>

Ответ 4

После моих настроек я нашел решение, установив дополнение на 0px и, похоже, все исправить. Спасибо всем за ваши ответы.: D