Question

我希望页脚固定在屏幕的末尾我添加到<h:body style="display: block;">没有变化，我添加到<div id="footer">属性style="position: fixed"并且没有变化。我页面页脚的图片如下 enter image description here

Answer 1

请尝试使用此代码：

`#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
}`

这应该适用于所有浏览器。如果您对此有任何进一步的问题，请告诉我。

Answer 2

尝试以下CSS规则：

#footer {
  // Specify the fixed position for the footer
  position: fixed;

  // Position it at the bottom of the screen
  left: 0px;
  bottom: 0px;

  // Make it span across 100% of the browser's width
  width:100%;
}

希望它有所帮助！

Answer 3

使用此代码：

HTML： #conneneur { 身高：100％; } ＆LT; /风格＆GT;

<body>
<div id="wrapper">
  <div id="container">
    Body
  </div>
  <div id="footer">
    Footer
  </div>
</div>
</body>

CSS：

html, body {
  margin : 0;
  padding : 0;
  height : 100%;
}

#wrapper {
  position : relative; 
  min-height : 100%;
  background : green;
}

#container {
  padding-bottom : 6em; /* padding-bottom = footer height */
}

#footer {
  position : absolute;
  width : 100%; 
  height : 6em;
  bottom : 0; /* set footer at bottom */
  left : 0; /* set footer at left */
  background : red;
}

jsfiddle

Answer 4

我为你解决了这个问题，你可以在Fiddle

查看

<body>  

<div id="content">  

 <div id="text"></div>  

</div>  

<div id="footer"></div>  

</body> 


* {  
 margin: 0;  
 padding: 0;  
}  
html, body {height: 100%;} 

#content {  
 position: relative;  
 min-height: 100%;
 border:1px solid red;
}  

* html #content {  
 height: 100%;

}  
#text {  
 padding-bottom: 100px;
        border:1px solid green;
}  
#footer {  
 position: relative;  
 height: 80px;  
 margin-top: -80px; 
 border:2px solid black;
}

见演示：

http://jsfiddle.net/4Znbx/

Answer 5

你可以试试这个可行的html代码。但需要#footer 从文档流程中。这就是为什么你必须使用width: 100%。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
        }
        html, body
        {
            min-height: 100%;
            height: 100%;
        }
        #footer
        {
            position: absolute;
            bottom: 0px;
           /* width: 100%; */
        }
    </style>
</head>
<body>
    <div id="footer">
        this is a footer
    </div>
</body>
</html>

所以我建议使用这个html结构 - 将保持文档流程并为您提供干净的（html4）结构。

<style type="text/css">
    *
    {
        padding: 0;
        margin: 0;
    }
    html, body
    {
        min-height: 100%;
        height: 100%;
    }
    #header  { height: 20%;  }
    #content { height: 70%;  }
    #footer  { height: 10%;  }
</style>

<div id="header"></div>
<div id="content"></div>
<div id="footer">
    this is a footer
</div>

如何修复屏幕末尾的页脚

5 个答案: