wake-up-neo.net

Bootstrap 3 - Fülle einen Bereich mit einem Iframe 100%

Ich ändere das Dashboard-Beispiel und versuche, einen Bereich der Seite vollständig mit einem Iframe zu füllen, sodass er bis zum Edge reicht, aber ich habe Probleme damit.

Grundsätzlich habe ich das Navi, die Sidebar und ich möchte den Seitenbereich vollständig mit einem Iframe füllen, aber er erzeugt einen horizontalen Rand und streckt den Iframe nicht vertikal. 

Weiß jemand, wie ich die gesamte Fläche füllen kann? Wenn die Seite verkleinert ist, muss sie nach Möglichkeit auch in einer responsiven Ansicht arbeiten.

Edit: Das Problem hat etwas mit Bootstrap zu tun, denke ich, vielleicht muss ich ein paar CSS überschreiben oder die Spalteneinstellung ändern?

Edit 2: Ok Ich habe meine Frage irgendwie beantwortet und jetzt, nachdem ich eine neue CSS-Regel hinzugefügt und den Bootstrap-Code ein wenig angepasst habe, habe ich eine volle Fläche ausgedehnt, jedoch gibt es eine kleine Grenze/Rand, die ich jetzt bekommen muss loswerden, wenn ich absolute verwende, wird der iframe von der seite nach rechts verschoben und nicht direkt zum rand, irgendwelche ideen, wie ich das gesamte gebiet nutzen kann? Ich bin ein bisschen neu bei Bootstrap, also muss ich wahrscheinlich nur eine leichte Anpassung vornehmen oder so.

Mein aktueller Code:

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

Ich hatte das Problem, dass iframe keine 100% Höhe akzeptiert. Siehe diesen Thread.

Die Lösung ist, style="position:absolute;" für den iframe zu verwenden.

6
allwynmasc

Für das, was es wert ist, hat das für mich funktioniert

<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% Höhe bedeutet 100% der verfügbaren Höhe. Da hier nichts los ist, reicht das gerade aus, um den iframe zu zeigen.

Sie müssen etwas erzwingen, um den Container des genannten Iframes zu öffnen, um die gesamte verfügbare Höhe der Seite zu haben, damit 100% Höhe das tut, was Sie wollen, und den gesamten Platz ausfüllen.

Dies ist ein nerviges Problem = p

Ich löse häufig mit Javascript, nehme die Höhe des Ansichtsfensters ein und stelle die Höhe des Containers manuell auf die erforderliche Höhe ein. Passen Sie auf, dass Sie nicht mehr einstellen, da sonst ein seitlicher Bildlaufbalken angezeigt wird. Wenn Sie es ausprobieren möchten, ist hier die Funktion, die ich verwende, um die Fenstergrößen (Viewport) zu ermitteln. Hier ist dein HTML-Code (ich habe Sachen entfernt, um sie kleiner zu machen, aber ich habe sie komplett getestet)

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

Ich habe auch versucht, ein ähnliches Problem zu lösen (ich bin derzeit auf Bootstrap 4). Mein Layout enthält einen <div> oben, der Steuerelemente enthält, und einen <iframe> unten für den Inhalt, der die verbleibende Höhe der Seite ausfüllen muss (ggf. mit Bildlaufleisten). Ich habe die Seitenleiste hier hinzugefügt, um die ursprüngliche Frage zu reproduzieren. 

Ich habe es mit calc () und vh Einheiten gelöst:

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 (vor dem Tag </body> setzen):

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

Ich habe dies in Chrome, IE11, Edge und Firefox getestet und arbeitet charmant mit korrekter Handhabung der Browserfenstergrößen, einschließlich. Ich weiß nicht, warum ich die Konstante +25 zur Berechnung hinzufügen musste, es funktioniert einfach. Durch geringfügige Änderung dieser Zahl können Sie den weißen Rand unter dem Iframe vergrößern/verkleinern.

Sie können jQuery wahrscheinlich leicht loswerden, wenn Sie möchten, indem Sie den body-OnLoad () - Handler und einen reinen Javascript-Ausdruck verwenden, um die .top-Koordinate des iframe abzurufen.

Keine Javascript-Lösung

Wenn Sie die Höhe Ihrer oberen Leiste genau kennen, können Sie das Javascript vollständig loswerden, indem Sie diese CSS mit demselben HTML-Code wie oben verwenden:

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

(ersetzen Sie die 100px mit der entsprechenden Höhe)

0
davidthegrey

Nach meinen Anpassungen habe ich die Lösung gefunden, indem ich den Abstand auf 0px gesetzt habe und das schien alles zu reparieren. Vielen Dank an alle für Ihre Antworten. : D

0
zeddex