Iframe between the header and the footer

advertisements

I was wondering how can I add an iframe between the header and the footer of my webpage, I mean in the blank between the header and footer. I tried height 100% but it overrides the header! I am using the template from http://materializecss.com/templates/starter-template/preview.html. Can anyone help please? Thanks


To add an iframe in HTML between the header and footer, you will place this code, but change the source to whatever you want to point it to.

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

The width and height, if set to 100% is going to be confined to the parent elements on you form, which looks like one of your DIV's.

So on your example page, remove this code.

Replace this code with.

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

With

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