0

DIVページのコンテンツが画面の下部を埋めるのに十分な高さを持っている場合、ページの下部にを配置したいDIVの最後に貼り付ける必要がありcontent DIV、高さが十分でないか空の場合、この状況では下部にDIV貼り付ける必要がありますページの最後まで。

それは私の HTML と CSS です ( http://jsfiddle.net/maysamsh/eWhvs/embedded/result/ )

CSS:

@charset "UTF-8";
*{
    padding:0;
    margin:0;
    color:#FFF;
}
body {
    background-image: url(http://ashraafi.com/img/bgpattern.png);
    background-repeat: repeat;
}
#wrapper{
    min-width:900px;
    width: 100%;
    background-color:#CCC;
    position:relative;
}
#top{
    width:inherit;
    height:40px;
    background-color:#000;
    position:relative;
}
#content{
    width:inherit;
    background-color:#36C;
    position:relative;
}
#bottom{
   position:absolute;
   bottom:0;   
   left:0;
   background-color:#42210b;
   width: inherit;
   height: 35px;
}​

HTML:

<div id="wrapper">
    <div id="top">
        top
    </div>
    <div id="content">
        content
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
    </div>
    <div id="bottom">
        bottom
    </div>
<div>
4

1 に答える 1

1

最初の問題はposition:relative、#wrapper. それを削除すると、配置はページに対して相対的になります。

しかし、粘着性のあるフッターを作成するのは、それよりも少し複雑です。お勧めします: http://ryanfait.com/sticky-footer/

于 2012-11-18T14:58:58.487 に答える