web-dev-qa-db-fra.com

Bootstrap 3 - Remplissez une zone avec un Iframe 100%

Je modifie l'exemple du tableau de bord et j'essaie de remplir entièrement une zone de la page avec un iframe afin qu'il s'étende jusqu'au bord, mais j'ai du mal à le faire.

En gros, j'ai la barre de navigation, la barre latérale et je veux remplir entièrement la zone de page avec un iframe, mais cela crée une marge horizontalement et ne l'étire pas verticalement. 

Est-ce que quelqu'un sait comment je peux remplir toute la zone? Si la page est réduite, elle doit également fonctionner dans une vue réactive, si possible.

Edit: Le problème est quelque chose lié à bootstrap je pense, peut-être que je dois écraser certains CSS ou changer la configuration de la colonne?

Edit 2: Ok J'ai en quelque sorte répondu à ma question et maintenant, après avoir ajouté une nouvelle règle CSS et ajusté le code d’amorçage, l’étendre un peu, mais il reste une légère marge/bordure à obtenir. débarrassé de, si j'utilise absolue, l'iframe disparaît de la page vers la droite plutôt que d'aller jusqu'au bord, avez-vous une idée de la façon dont je peux utiliser toute la zone? Je suis un peu nouveau dans Bootstrap, donc je dois probablement faire un léger ajustement ou quelque chose du genre.

Mon code actuel:

<!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>
htmliframetwitter-bootstrap-3
15
zeddex

J'ai eu le problème de iframe n'acceptant pas 100% de hauteur. Voir ce fil.

La solution consiste à utiliser style="position:absolute;" sur l'iframe.

6
allwynmasc

Pour ce que cela vaut, cela a fonctionné pour moi

<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>
15
Marty

100% de hauteur signifie 100% de la hauteur disponible. Comme il n'y a rien qui se passe, c'est juste assez pour que l'iframe soit visible.

Vous devez forcer quelque chose pour ouvrir le conteneur de ladite iframe afin que toute la hauteur disponible de la page soit disponible, de sorte qu'une hauteur de 100% fasse ce que vous voulez, remplissez tout cet espace.

C'est un problème ennuyeux = p

Je résous souvent avec javascript, en capturant la hauteur de la fenêtre et en réglant manuellement la hauteur du conteneur à la hauteur requise. Faites juste attention à ne pas le régler davantage, sinon vous aurez une barre de défilement latérale car elle débordera. Si vous voulez essayer, voici la fonction que j’utilise pour obtenir les tailles de fenêtre (viewport). Voici votre HTML (j'ai enlevé des trucs pour le rendre plus petit, mais je l'ai testé complet)

<!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>
5
Caio Vianna Lima Netto

J'ai aussi essayé de résoudre un problème similaire (je suis actuellement sur Bootstrap 4). Ma mise en page a un <div> en haut, qui contient des commandes, et un <iframe> en bas pour le contenu, qui doit remplir la hauteur restante de la page (avec des barres de défilement si nécessaire). J'ai ajouté la barre latérale ici pour reproduire la question initiale. 

Je l'ai résolu en utilisant les unités calc () et vh:

CSS:

   <style>
        #toolbarContainer { margin-bottom:6px; }
        #myIframe { width:100%; border: 1px solid #0094ff; border-radius:3px; }
    </style>

HTML:

<body>
    <div class="container-fluid">
        <div id="toolbarContainer">        
            <div class="row"> [content here]</div>
            <div class="row"> [more content here]</div>
        </div>
        <div class="row">
            <div class="col-3 col-md-2" id="sidebar">
                <div class="alert alert-info">Sidebar content here</div>
            </div>
            <div class="col-9 col-md-10">
                <iframe id="myIframe" src="about:blank"></iframe>
            </div>
         </div>
    </div>
</body>

JAVASCRIPT (le mettre avant la balise de fermeture </body>):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        document.getElementById('myIframe').style.height = 'calc(100vh - ' + ($('#myIframe').offset().top + 25) + 'px)';            
    });
</script>

J'ai testé cela dans Chrome, IE11, Edge et Firefox, et fonctionne un charme, avec une manipulation correcte des redimensionnements de la fenêtre du navigateur, y compris. Je ne sais pas pourquoi je devais ajouter la constante +25 au calcul, cela fonctionne. En modifiant légèrement ce nombre, vous pouvez augmenter/diminuer la marge blanche sous l’iframe.

Vous pouvez probablement vous débarrasser de jQuery facilement, si vous le souhaitez, en utilisant le gestionnaire body OnLoad () et une expression javascript pure pour obtenir la coordonnée .top de l'iframe.

Pas de solution javascript

Si vous connaissez à coup sûr la hauteur de votre barre supérieure, vous pouvez supprimer complètement le javascript en utilisant ce css avec le même code HTML que ci-dessus:

<style>
    #divFrameContainer { margin-bottom:6px; }
    #ifrBtLingua { height: calc(100vh - 100px); width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px;  }
</style>

(remplacez le 100px par la hauteur appropriée)

0
davidthegrey

Après mes ajustements, j'ai trouvé la solution en réglant le padding sur 0px et cela a semblé tout régler. Merci à tous pour vos réponses. :RÉ

0
zeddex