zoukankan      html  css  js  c++  java
  • 设置iframe 载入页面的效果跟直接打开这个页面一样

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style>
    *{margin:0;padding:0}
    html, body {height:100%;100%;overflow:hidden}
    table {height:100%;100%;table-layout:static;border-collapse:collapse}
    iframe {height:100%;100%}
    
    .header {border-bottom:1px solid #000}
    .content {height:100%}
    </style>
    </head>
    <body>
    <table>
      <tr><td class="content">
          <iframe src="http://www.baidu.com/" frameborder="0"></iframe></td></tr>
    </table>
    </body>
    </html>
    

    方案1:↑

    <!DOCTYPE html>
    <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <style type="text/css">
    			@charset "utf-8";
    
    			body {
    			    margin: 0px;
    			    padding: 0px;
    			}
    
    			/* iframe's parent node */
    			div#root {
    			    position: fixed;
    			     100%;
    			    height: 100%;
    			}
    
    			/* iframe itself */
    			div#root > iframe {
    			    display: block;
    			     100%;
    			    height: 100%;
    			    border: none;
    			}
            </style>
        </head>
        <body>
            <div id="root">
                <iframe src="http://www.baidu.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>
    

    方案2:↑ 

     

  • 相关阅读:
    传参问题-HttpMessageNotReableException
    排序03-简单排序法
    排序02-直接插入排序法
    排序01-冒泡排序法
    书摘
    CS229
    SLAM学习笔记
    形态学图像处理
    SLAM学习笔记
    SLAM学习笔记
  • 原文地址:https://www.cnblogs.com/bushe/p/4802584.html
Copyright © 2011-2022 走看看