iframe之后的Bootstrap添加部分

Question

我有一个非常简单的Bootstrap，有两个全屏部分：

<!-- Intro Header -->
<header class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 class="brand-heading">Roald Dahl</h1>
                    <p class="intro-text">100th anniversary of Roald Dahl's birth
                        <br>World's No.1 storyteller</p>
                    <a href="#timeline" class="btn btn-circle page-scroll">
                        <i class="fa fa-angle-double-down animated"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- About Section -->
<section id="timeline" class="container-fluid content-section">
    <div class="row">
<iframe src='http://roalddahl.tk/TMcompiled/timeline.html' style="width: 100%; height: 100%; position: absolute; border:0px solid lightgrey;" frameborder='1'></iframe>
    </div>
</section>

我想在iframe之后再添加一个部分，如下所示：

<section id="bibliography" class="container content-section">
  <div class="row">
    <div class="download-section">
        <div class="container">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Download Grayscale</h2>
                <p>You can download Grayscale for free on the preview page at Start Bootstrap.</p>
                <a href="http://startbootstrap.com/template-overviews/grayscale/" class="btn btn-default btn-lg">Visit Download Page</a>
            </div>
        </div>
    </div>
  </div>
</section>

问题是，我的第三部分的所有内容都会进入ifarme内容之上的iframe部分下方的iframe部分而非其下方。

一些CSS：

}
.intro {
  display: table;
  width: 100%;
  padding: 100px 0;
  margin: 0px;
  text-align: center;
  color: black;
  background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;
  background-color: pink;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
}

.colorcolor {
    background-color: red;
}
.content-section {
  padding-right: 20px;
  margin-left: 15px;
  height: auto;
}

我的第三部分无法正确查看我的iframe并将所有内容放在介绍的正下方但我不确定如何使其正常工作。 是否可以在不修改iframe secton的情况下添加下一部分？