位置：固定 - 将我的页脚推到标题上方答案

【问题标题】：Position: Fixed - pushing my footer over header位置：固定 - 将我的页脚推到标题上方
【发布时间】：2016-08-15 06:43:49
【问题描述】：

请忍受我糟糕的编码（我还在学习）我正在为我的老板创建一个 wordpress 网页，它只是一个 header.php index.php 和 footer.php

index.php 中的内容只是一个 iframe，我想放在 header.php 和 footer.php 后面。虽然当我申请职位时：固定；到我的 iframe（以便它填充网页）我的页脚跳起来并覆盖了我的 header.php。

我正在努力寻找一种方法，我可以拥有一个 100% 大小的 iframe（无滚动）以及一个留在页面底部的页脚菜单

提前感谢:)

body, html {
    margin: 0;
    padding: 0;
}

#container {
    display: inline-block;
}


header {
    top: 0;
    z-index: 1;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    width: 100%;
    height: 100px;

 
}
.bmenu li{
	display: inline-block;
}


#menu1 ul{
    float: left;
}

#menu2 {
    float: right;
    padding-right: 5%;
}

#logo img{
    margin-left: 15%;
    width:  300px;
    max-width: 100%;
}

.cmenu li{
    display: inline;
    padding: 20px 50px;
    max-width: 100%;
}

#navigation3 ul{
    margin-left:40%;
    margin-bottom: 10px;
    max-width: 100%;
    z-index: 1;
    position: fixed;
}

iframe {
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
    }

<body>

  <div id="container">
    <header>

      <div id="menu1">
        <nav id="navigation1">
          <ul>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu itemm</li>
          </ul>
        </nav>
      </div>

      <div id="menu2">
        <nav id="navigation2">
          <ul>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu itemm</li>
          </ul>
        </nav>
      </div>


      <div id="logo">
        <img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="logo">
      </div>
    </header>

    <article>
      <iframe name="background" scrolling="no" src="https://www.bing.com.au" frameborder="0">
        <p>Your browser does not support iframes.</p>
      </iframe>
    </article>

    <div id="footer">
      <nav id="navigation3">
        <ul>
          <li>menu item</li>
          <li>menu item</li>
          <li>menu itemm</li>
        </ul>
      </nav>
    </div>

    <?php wp_footer(); ?>
  </div>
</body>

【问题讨论】：

标签： php html css iframe position

【解决方案1】：

试试看：

#页脚{ 位置：绝对；底部：0；左：0； }

【讨论】：