2

次の問題があります。

Twitter ブートストラップを使用して新しい Web サイトを作成していますが、背景に問題があります。以下は私が持っているものです:

<body>   
    <div class="wrapper">
        <div class="navbar navbar-inverse navbar-fixed-top">
               ...
        </div>
        <div id="header">
             ...
        </div>
        <div id="content">
             ...
        </div>
        <div class="push>
        </div>
    </div>
    <div class="footer">
         ....
    </div>
</body>

ナビゲーションバーは上部に固定されています。(固定高さ) ヘッダー (タイトル部分) はページと共にスクロールされ、固定高さです。フッターはページの下部にありますが、さらにコンテンツがある場合はスクロールします (下部では固定されず、高さは固定されています)。

私が欲しいのは、コンテンツが利用可能なすべてのスペースを占める背景を持つことです（ヘッダーの直後からフッターまで） 画像を明確にする

完全な HTML & CSS (ブートストラップ CSS なし) コード

4

2 に答える 2

1

つまり、コンテンツ領域のヘッダーとフッターを少なくとも 100% 少なくしたいということですか?

これは私がそれを行う方法です：

デモ: http://jsbin.com/ofijap/1/edit

.head {
  height:100px;
  background-color:green;
}
.wrap {
  min-height:100%;
  background-color:red;
}
.footer {
  height:100px;
  background-color:grey;
  margin-top:-100px;
}
.content {
  padding-bottom:100px;
}


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="wrap">
      <div class="head">Head</div>
    <div class="content">content</div>   
    </div>
  <div class="footer">footer</div>
</body>
</html>

編集：

経験則として、垂直方向のスペースを何かで埋めたい場合は、おそらく min-height:100%; が必要です。ただし、その親も 100% の高さを持つ必要があり、body 要素まで同様です。

于 2013-01-04T10:57:36.047 に答える
0

私の最終結果を見たい人へ: @user1721135 に感謝;) http://jsbin.com/udoxet/2/edit

今、私はそれを自分のウェブサイトに移植してみて、それが機能するかどうかを確認します:)

于 2013-01-04T12:21:15.757 に答える