0

私が現在取り組んでいるサイトには、ページのコンテンツの一部が残りの部分よりも小さいため、スティッキー フッターが必要です。

私のウェブサイト

スティッキーフッターを機能させるために、多くのリソース/チュートリアルを試しました。

チュートリアルをフォローしました

私はこのチュートリアルを実装しようとしましたが、以下はそれに付随する私のコードです。私は誰かを願っています

この機能を実装するために私のコードに CSS の変更を提案できる人はいますか?

<body>
    <div id="wrapper">
        <div id="header-wrap">
            <div id="header"></div>
            <div id="home-header"></div>
            <div class="push"></div>
        </div>
        <div id="footer-wrap">
        </div>
    </div>
</body>

CSS

#footer-wrap
{
    background: url("images/footer.jpg") repeat-x scroll center bottom transparent;
    color: rgb(117, 139, 141);
    height: 462px;
    position: relative;
    width: 100%;
}
#header-wrap
{
    clear: both;
    min-height: 100%; 
    margin-bottom: -462px; 
}
#header-wrap:after
{
    content:"";
    display:block;
    height:462px;
}

私のために働いていません。助けが必要！

また、「プッシュ」は使用されていません。もしかして使う？

編集

body {
  height: 100%;
  margin:0px
}

html
{
height: 100%;
margin: 0px;
}

#wrapper
{
    min-height: auto !important;
    min-height: 100%;

}
4

3 に答える 3

0

CSSトリックでこれを行うことができます

CSS 

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

.wrapper{
    min-height:100%;
    position:relative;
}

.container{
    width:960px;
    margin:0 auto;
    padding-bottom:100px;
}

.header{
    height:100px;
    background-color:#066;
}

.footer{
    position:absolute;
    bottom:0;
    height:100px;
    background-color:#006;
    width:100%;
}

html

<div class="wrapper">
    <div class="container">

        <div class="header">
            Header
        </div>
        <div style=" text-align:center; padding-top:25px;">
         Place you content here as much as you like
        </div>

    </div>

    <div class="footer">
        Footer
    </div>
</div>

作業中のjsフィドルファイル

于 2013-07-04T05:44:19.487 に答える
0

これは機能します。

CSS

* {
  margin: 0;
}
html, body, #wrapper {
  height: 100%;
}
.header-wrap {
  min-height: 100%;
  margin-bottom: -462px; 
}
.header-wrap:after {
  content: "";
  display: block;
}
#footer-wrap, .header-wrap:after {
  height: 462px; 
}
#footer-wrap {
  background: orange;
}

HTML 

<div id="wrapper">
    <div class="header-wrap">
        <div id="header">#header</div>
        <div id="home-header">#home-header</div>
    </div>

    <footer id="footer-wrap">
      #footer-wrap
    </footer>
</div>
于 2013-07-04T06:01:20.397 に答える