Iframe между верхним и нижним колонтитулом

Question

Мне было интересно, как я могу добавить iframe между заголовком и нижним колонтитулом моей веб-страницы, я имею в виду пробел между верхним и нижним колонтитулом. Я пробовал высоту 100%, но он переопределяет заголовок! Я использую шаблон от http://materializecss.com/templates/starter-template/preview.html. Может ли кто-нибудь помочь? Спасибо

Answer 1

Чтобы добавить iframe в HTML между верхним и нижним колонтитулом, вы поместите этот код, но измените исходный код на то, что вы хотите указать.

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

Answer 2

Использование CSS position и top позиционировать IFrame ниже заголовка. Попробуйте использовать

position:absolute; 
top:65px; 
left:0px; 

Смотрите здесь:

http://www.w3schools.com/cssref/pr_pos_top.asp http://www.w3schools.com/css/css_positioning.asp