html - 页眉和页脚之间的iframe

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        3年前关闭。
                                                                                            
                
        
我想知道如何在网页的页眉和页脚之间添加iframe，我的意思是在页眉和页脚之间的空白处。我尝试将高度设为100％，但它会覆盖标题！我正在使用http://materializecss.com/templates/starter-template/preview.html中的模板。有人可以帮忙吗？谢谢

最佳答案

要在页眉和页脚之间添加HTML iframe，请放置此代码，但将源更改为您要指向的内容。

<iframe src="http://www.unlocktheinbox.com"></iframe>

宽度和高度（如果设置为100％）将限于表单上的父元素，这看起来像是DIV之一。

因此，在示例页面上，删除此代码。

将此代码替换为。

<div class="section no-pad-bot" id="index-banner">
        <div class="container">
          <br><br>
          <h1 class="header center orange-text">Starter Template</h1>
          <div class="row center">
            <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
          </div>
          <div class="row center">
            <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>
          </div>
          <br><br>

        </div>
      </div>


      <div class="container">
        <div class="section">

          <!--   Icon Section   -->
          <div class="row">
            <div class="col s12 m4">
              <div class="icon-block">
                <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
                <h5 class="center">Speeds up development</h5>

                <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="icon-block">
                <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
                <h5 class="center">User Experience Focused</h5>

                <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
              </div>
            </div>

            <div class="col s12 m4">
              <div class="icon-block">
                <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
                <h5 class="center">Easy to work with</h5>

                <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
              </div>
            </div>
          </div>

        </div>
        <br><br>

        <div class="section">

        </div>
      </div>

用

 <iframe src="http://www.unlocktheinbox.com" width="100%" height="100%"></iframe>