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％;

htmlcsswebsite-designdesigncross-browser
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