0

I want the footer is fixed at the end of the screen I added to the <h:body style="display: block;"> there is no change ,i added to <div id="footer"> the attribute style="position: fixed" and there is no change. the picture of the footer of my page is below enter image description here

4

5 回答 5

0

你可以试试这个 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>
于 2013-09-26T10:12:04.130 回答
0

请尝试使用此代码：

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

这应该在所有浏览器中都能很好地工作。如果您对此有任何进一步的问题，请告诉我。

于 2013-09-26T09:45:27.800 回答
0

尝试以下 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%;
}

希望能帮助到你！

于 2013-09-26T09:46:45.723 回答
0

使用此代码：

HTML : #conteneur { 高度 : 100%; } </style> 

<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

于 2013-09-26T09:54:41.007 回答
0

我为你解决了问题，你可以在 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/

于 2013-09-26T09:54:58.340 回答