0

追加した画面の最後にフッターを固定したいのですが、変更はありません、属性に<h:body style="display: block;">追加しても変更はありません。私のページのフッターの写真は以下です <div id="footer">style="position: fixed"ここに画像の説明を入力

4

5 に答える 5

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 に答える
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 に答える