Question

如何使用页脚文件创建粘性页脚。例如，当我创建footer.php文件并将其包含到主页面时，如何使其成为粘性页脚。通过我的搜索，最好的方法是创建一个粘性页脚就是使用包装标签，如下面的代码所示。

＆＃13;

<div class="wrapper">
    <header>header</header>
    <div class="main">
        vfdgdgdgdf
    </div>
    <div class="push"></div>
</div>
<footer>Foo</footer>

＆＃13;

这是css代码

＆＃13;

html,body{
    height:100%;
    min-height: 100%;
}

.main{
    min-height: 100%;
    height:100%;
}

header{
    height:50px;
    background-color: #ccc;
}



.wrapper{
    min-height: 100%;
    height:100%;
    margin: 0 0 -60px;   
}
.push{
    height:60px;
}

footer
{
    background-color:grey;
    position:relative;
    height:60px;
    width:100%;
}

＆＃13;

但是当我们包含单独的页脚文件时可以使用它，例如

＆＃13;

<header> </header>
<body>
<?php include('header.php');?>
 
  
<?php include('footer.php');?>
</body>

＆＃13;

Answer 1

CSS如果你从另一个文件中包含部分标记，则无关紧要，因为这发生在服务器端，而CSS则是客户端问题。所以只需忽略包含部分，就这样做：

footer{
    height: 100px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

您可能会看到它正在使用此代码段：

#main{
  background-color: #dfdfff;
}
footer{
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #ffdfdf;
}

<div id="main">
  This is the content of the page
  <footer>This is the footer section</footer>
</div>

Answer 2

试试这个，

footer
{
background-color:grey;
position:absolute;
height:60px;
width:100%;
}

使用footer.php文件创建一个粘性页脚

2 个答案: