1

sticky-footer.html の例をブートストラップ プロジェクトに追加しようとしています。ただし、私のレイアウトを台無しにしている本体クラスにコードの衝突があります。

ブートストラップレスポンシブ固定ナビゲーションバーを使用した私のページコードでは:

  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

スティッキーフッターの例では、次を使用しています。

  html,
  body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
  }

現時点では、CSS に両方の body タグが含まれています。デスクトップページ幅のバージョンを除いてすべてが機能しています.現在のcssでは、下に余分な深さのあるスティッキーフッターが表示されます.ページには必要ないのに垂直スクロールバーがありますか? そして、それはすべて、この body タグの衝突と余分な60px.

  /* Sticky footer styles
  -------------------------------------------------- */

  html,
  body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
  }

  /* Wrapper for page content to push down footer */
  #wrap {         
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -190px;
  }

  /* Set the fixed height of the footer here */
  #push,
  #footer {
    margin-top:20px;
    height: 190px;      
  }
  #footer {       
background-image:url(assets/img/herringboneLight.jpg);   
  }

  /* Lastly, apply responsive CSS fixes as necessary */
  @media (max-width: 767px) {
    #footer {

    }
  }

 body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
 }

乾杯アレックス

4

1 に答える 1

2

サポートしようとしているブラウザーはわかりませんが、CSS3 ソリューション (実際には IE8+box-sizing ) はonを変更することになると思いますbody:

body {
    padding-top: 60px;
    -moz-box-sizing: padding-box; /* or border-box */
    -webkit-box-sizing: padding-box; /* or border-box */
    box-sizing: padding-box; /* or border-box */
}

これにより、が全体の量height: 100%に含まれます。60pxFirefox で動作しているため、このフィドルにはスクロール バーがありますが、これにはありません。

于 2013-01-23T14:53:59.093 に答える