ブートストラップ付スティッキーフッタ - 幅の問題

-1

私はレスポンシブ変数の高さの固定スティックのフッターを取得しようとしています。私はTwitter Bootstrapと次のページテンプレートを使用しています。私は、固定フッターを持つためにCSSを追加しました。ページの高さが関係する限り、私は望みの結果を得ています。しかし、クラスcontainer-fluidを使用しているにもかかわらず、ページの幅が縮小されています。私は同じクラスをヘッダー/フッターに追加しようとしました。 Firebugの計算されたスタイルでボディ、ヘッダー、フッター、#wrapperのどれかをチェックするとWidthが設定されていません。ブートストラップ付スティッキーフッタ - 幅の問題

CSS：

html, body { 
    height: 100%; 
} 

body { 
    display: table; 
} 
header, #wrapper, footer{ 
    display: table-row; 
} 
#wrapper{ 
    height: 100%; 
} 
footer { 
    min-height: 50px; 
}

HTML：

<body> 
<header class="navbar navbar-inverse"> 
    <div class="container-fluid"></div> 
</header> 
<div id="wrapper" class="container-fluid"> 
</div> 
<footer class="navbar navbar-inverse"> 
    <div class="container-fluid"></div> 
</footer>

出典

2016-07-31 bvnbhati

が.navbar margin-bottom:0を設定し、これを試してみてください。これは、高さがwrapperになるようにフッターを調整するか、または2の間にある内容を調整します。navbar。

#wrapper{ 
 
    height:500px; 
 
} 
 
.navbar{ 
 
    margin-bottom:0 !important; 
 
}

<head> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<header> 
 
    <nav class ="navbar navbar-inverse"> 
 
    <div class ="container-fluid"></div> 
 
    </nav> 
 
</header> 
 

 
<div id="wrapper"> 
 
    <div class="container-fluid"></div> 
 
</div> 
 

 
<footer> 
 
<nav class ="navbar navbar-inverse"> 
 
    <div class ="container-fluid"></div> 
 
    </nav> 
 
</footer>

出典

2016-07-31 03:52:08 frnt

ページの高さがビューポートの高さを超えた場合、私はそれが一番下に固定したくありません。ページの高さがビューポートの高さよりも小さい場合は、下に押さなければなりません。 – bvnbhati

@bvnbhatiなぜあなたの身体表示を設定しましたか：テーブル。 – frnt

これは、高さが可変の場合、フッタースティックを下に移動させる唯一の方法です。 http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ – bvnbhati

ブートストラップ付スティッキーフッタ - 幅の問題

答えて

関連する問題