Html Bootstrap 3 - 用 Iframe 100% 填充区域

Question

提问by zeddex

I am modifying the Dashboard example and trying to fill an area of the page fully with an iframe so it stretches to the edge but i am having trouble doing so.

我正在修改仪表板示例并尝试用 iframe 完全填充页面区域，以便它延伸到边缘，但我在这样做时遇到了麻烦。

Basically i have the nav, sidebar and i want to fully fill the page area with an iframe but it creates a margin horizontally and does not stretch the iframe vertically.

基本上我有导航、侧边栏，我想用 iframe 完全填充页面区域，但它会在水平方向上创建一个边距，并且不会垂直拉伸 iframe。

Does anyone know how i can fill the full area? If the page is downsized it needs to work in a responsive view also if possible.

有谁知道我怎样才能填满整个区域？如果页面缩小了，如果可能的话，它也需要在响应式视图中工作。

Edit: The problem is something related to bootstrap i think, perhaps i need to overwrite some CSS or change the column setup?

编辑：我认为问题与引导程序有关，也许我需要覆盖一些 CSS 或更改列设置？

Edit 2: Ok I have sort of answered my question and now after adding a new css rule and adjusting the bootstrap code a bit have it stretching a full area however there is a slight margin/border that i now need to get rid of, if i use absolute it makes the iframe go off the page to the right rather than going right to the edge, any ideas on how i can use the full area? Im kinda new to Bootstrap so i probably just need to make a slight adjustment or something.

编辑 2：好的，我已经回答了我的问题，现在在添加新的 css 规则并稍微调整引导程序代码后，它会拉伸整个区域，但是我现在需要去掉一点边距/边框，如果我使用绝对它使 iframe 离开页面的右侧，而不是向右移动到边缘，关于如何使用整个区域的任何想法？我对 Bootstrap 有点陌生，所以我可能只需要稍微调整一下。

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

Answer 1

采纳答案by allwynmasc

I had the issue about iframe not accepting 100% height. See this thread.

我遇到了 iframe 不接受 100% 高度的问题。看到这个线程。

The solution is to use style="position:absolute;"on the iframe.

解决方案是style="position:absolute;"在 iframe上使用。

Answer 2

回答by Marty

For what it is worth, this worked for me

对于它的价值，这对我有用

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

Answer 3

回答by Caio Vianna Lima Netto

100% height means 100% of the available height. Since there is nothing going on, that is just enough for the iframe to show.

100% 高度表示可用高度的 100%。由于没有任何事情发生，这足以让 iframe 显示。

You need to force something to open up the container of said iframe to have all the available height of the page, so that 100% height will do what you want, fill all of that space.

您需要强制某些东西打开所述 iframe 的容器以拥有页面的所有可用高度，以便 100% 高度可以满足您的需求，填充所有空间。

This is an annoying issue =p

这是一个烦人的问题=p

I often solve with javascript, capturing the viewport height and manually setting the container height to the necessary height. Just be careful not to set it more, or you will get a side scrollbar since it will overflow. If you want to try, here is the function I use to get the window (viewport) sizes. Here is your HTML (I removed stuff to make it smaller, but I tested it full)

我经常用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>

Answer 4

回答by zeddex

After my adjustments i found the solution by setting the padding to 0px and that has seemed to fix everything. Thanks everyone for your answers. :D

经过我的调整后，我通过将填充设置为 0px 找到了解决方案，这似乎解决了所有问题。谢谢大家的回答。:D

Answer 5

回答by davidthegrey

I have tried to solve a similar issue too (I am currently on Bootstrap 4). My layout has a <div>on top, which contains controls, and an <iframe>on the bottom for the content, which has to fill up the remaining height of the page (with scrollbars if needed). I have added the sidebar here to reproduce the original question.

我也试图解决类似的问题（我目前在 Bootstrap 4 上）。我的布局<div>顶部有一个，其中包含控件，<iframe>底部有一个内容，它必须填充页面的剩余高度（如果需要，可以使用滚动条）。我在此处添加了侧边栏以重现原始问题。

I solved it using calc() and vh units:

我使用 calc() 和 vh 单位解决了它：

CSS:

CSS：

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

HTML:

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 (put it before the </body>closing tag):

JAVASCRIPT（放在</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>

I tested this in Chrome, IE11, Edge and Firefox, and works a charm, with correct handling of the browser window resizes, including . I don't know why I had to add the constant +25 to the calc, it just works. By slightly changing that number you can increase/decrease the white margin below the iframe.

我在 Chrome、IE11、Edge 和 Firefox 中对此进行了测试，并且在正确处理浏览器窗口大小调整（包括 . 我不知道为什么我必须将常数 +25 添加到计算中，它只是有效。通过稍微更改该数字，您可以增加/减少 iframe 下方的白边距。

You can probably get rid of jQuery easily, if you want, using the body OnLoad() handler and a pure javascript expression to get the .top coordinate of the iframe.

如果需要，您可以轻松摆脱 jQuery，使用主体 OnLoad() 处理程序和纯 javascript 表达式来获取 iframe 的 .top 坐标。

No javascript solution

没有javascript解决方案

If you know for sure the height of your top bar, you can completely get rid of the javascript, using this css with the same HTML as above:

如果你确定你的顶栏的高度，你可以完全摆脱 javascript，使用与上面相同的 HTML 的 css：

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

(replace the 100px with the appropriate height)

（将 100px 替换为适当的高度）

Answer 6

回答by postfixNotation

I've done the following with Bootstrap 4

我已经使用 Bootstrap 4 完成了以下操作

    <iframe class="position-absolute w-100 h-100 border-0" src="https://foo.bar"></iframe>

It's the simplest solution I can think of and it's "pure" Bootstrap.

这是我能想到的最简单的解决方案，它是“纯”Bootstrap。

Html Bootstrap 3 - 用 Iframe 100% 填充区域

提问by zeddex

采纳答案by allwynmasc

回答by Marty

回答by Caio Vianna Lima Netto

回答by zeddex

回答by davidthegrey

No javascript solution

没有javascript解决方案

回答by postfixNotation

相关推荐

最近更新

标签

Html Bootstrap 3 - 用 Iframe 100% 填充区域

提问by zeddex

采纳答案by allwynmasc

回答by Marty

回答by Caio Vianna Lima Netto

回答by zeddex

回答by davidthegrey

No javascript solution

没有javascript解决方案

回答by postfixNotation

相关推荐

Html CheckboxList 显示对齐？

HTML 标签中的大写字母与 CSS 文本转换

具有 URL 值的 HTML 标记属性的完整列表？

Html Twitter Bootstrap 导航栏 - 右对齐下拉菜单

相关推荐

最近更新

标签