web-dev-qa-db-ja.com

上下のdivがピクセル単位の場合、100%に等しい3-div-sandの全高を作成できますか?

可能性のある複製:
テーブルセル内のDIVに問題はありますか?

わかりましたので、絶対位置と144pxの高さのヘッダーとフッターがあります。中央の領域のコンテンツdivは、その間の領域の全高にする必要があります。

簡略化:

<style>
  .sandwich{
    position: absolute;
    height: 144px; 
    width: 100%; 
    left: 0;
  }
  #header{ top:    0px; }
  #footer{ bottom: 0px; }
</style>

<div id="header" class="sandwich"></div>
<div id="content"> Content </div>
<div id="footer" class="sandwich"></div>

したがって、基本的には、100%-288pxのdivが必要です。最初は100%x 100%のdivを作成し、上下に144のパディングを入れてから、そこにコンテンツdivを100%で詰めることができると考えましたが、私の考えはどこかに迷い込んでしまいました。

enter image description here

これは、「パンレイヤー」に20%の高さを使用して作成した例です。 (このプロジェクトではできません)スクロール「肉の層」に60%の高さを使用し、上部に配置しました:20%;

1
Garet Claborn

次のCSSを追加するだけです。

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
#content{
  position: absolute; 
  top: 144px; 
  bottom: 144px; 
  left: 0px;
  width: 100%;
  overflow: auto; 
}

そしてプレスト。

0
Garet Claborn

どうでもいいように思えますが、ヘッダーとフッターの間にコンテンツがなくても、フッターを画面の一番下に配置したいと思っています。これは正確ですか?もしそうなら、あなたは「スティッキーフッター」ソリューションを探しています。そこにはたくさんのメソッドがあります。このメソッドを開始するには、 CssStickyFooter を試してください。

1
SubTypical

position:fixedクラスでz-index:10および.sandwichを使用してヘッダーとフッターを#content divの上に静的に保ち、bodyをスタイル設定して背景の赤色を取得します間のスペースを埋めます。 ライブデモはこちら

<style>

    body{
        background-color:red;
        padding:0;
        margin:0;
    }

    .sandwich{
        position:fixed;
        height: 50px;
        width: 100%; 
        background-color:grey;
        z-index:10;
    }

    #header{ top: 0px;}
    #footer{ bottom: 0px;}

    #content{ position:absolute; top:50px; }  
</style>

<div id="header" class="sandwich"></div>
<div id="content"> Content goes here</div>
<div id="footer" class="sandwich"></div>
1
Nick