Question

请忍受我可怕的编码（我还在学习）我正在为我的老板创建一个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>

Answer 1

试一试：


    #footer {
        position: absolute;
        bottom: 0;
        left: 0;
    }

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

1 个答案: