Question

我有一个页脚部分，我将包含在我的网站的每个页面。所以我采取了PHP的帮助并包含它

<?php include('footer.php'); ?>

但我的问题是它陷入固定的位置。如果我在页脚部分之前添加html元素，它会在其他元素之上添加。如何解决它？

<html>
<head>
<style>
  #mydiv{
     width:350px;
     height:550px;

     background:#d3a625;
     position:fixed;
     top:70px;
     left:300px;
     position:relative;

  }

  #mydiv input{

       position:absolute;
       right:0px;
       margin-left:15px;
  }
  #image{
     width:60px;
     height:60px;
     border:1px solid black;
  }
</style>
</head>
<body>
<form action='<?php echo $_SERVER['PHP_SELF']; ?>' id='mydiv' method='post' enctype='multipart/form-data'>
   </br>
   <label for='username'>username</label>
   <input type='text' name='username' value='' autocomplete='off'>
   </br>
   <label for='password'>password</label>
   <input type='password' name='password' value='' autocomplete='off'>
   </br>

   <label for='password_again'>password_again</label>
   <input type='password' name='password_again' value='' autocomplete='off'>
   </br>

   <label for='name'>Full Name</label>
   <input type='text' name='name' value='' autocomplete='off'>
   </br>
   </br>
   <input type='submit' value='register' >
   <input type='hidden' name='token' value="<?php echo Token::generate(); ?>">


</form>
<script>

    function readfile(e){

         if(window.File && window.FileReader &&  window.FileList){

                var file=e.target.files[0];
                console.log(file.size);

                var fileReader=new FileReader();

                fileReader.onload=(function(file){
                    return function(e){

                         var div=document.getElementById('image');
                         var image=document.createElement('img');
                         image.setAttribute('src',e.target.result);
                         image.setAttribute('style','width:60px;height:60px;');
                         div.appendChild(image);


                }})(file);
         fileReader.readAsDataURL(file);
         }else{
             alert('file api not compatible with your browser');
         }  


    }
    document.getElementById('up').addEventListener('change',readfile,false);
</script>
<?php include('footer.php'); ?>
</body>
</html>

footer.php：

<div id='footer'>
   <div id='col1' class='fdiv'>
       <ul>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
        </ul>
    </div >
       <div id='col2' class='fdiv'>
       <ul>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
        </ul>
    </div >
       <div id='col3' class='fdiv'>
       <ul>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
        </ul>
    </div>
       <div id='col4' class='fdiv'>
       <ul>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
        </ul>
    </div >
</div>
</body>
</html>

的CSS：

   *{
     margin:0px;
     padding:0px;
   }
   body{
      height:1500px;
   }

     #footer{
         width:100%;
         height:170px;
         position:absolute;
         background:crimson;
         bottom:10px;
      }
      .fdiv{

         width:24%;
         height:100%;
         position:relative;
         float:left;

         text-align:center;

      }
      #footer a{
        text-decoration:none;
        color:white;
        font-size:17px;
      }
      #footer li{
        list-style-type:none;
      }
      #loginform{
          width:250px;
          height:100px;
          border:1px dashed black;
          background:olive;
          position:relative;
          top:100px;
          left:40%;
          text-align:center;
      }

Answer 1

为什么绝对定位如此简单的标记？ +我们真的看不到你生成的输出，所以它很难说出错误的确切位置。它可以是很多地方。使用一些包装或容器制作布局时很好。你可以管理一些带有填充或页脚边距的空间。

表的示例试图帮助它，它可以帮助你没有正确结束你的元素。

向我们展示生成的输出，我们可以告诉更多。

Answer 2

试试这个：

<table>
  <tr>
    <td><?php include('footer.php'); ?></td>
  </tr>
<table>

页脚覆盖其他html元素

2 个答案: