-2

2 つのシナリオがあります。

私はこのようなレイアウトを持っています:

----------------
button header
----------------
Contents
Contents
Contents
Contents (with scrollbar)
Contents
------------
footer
------------

私が達成したいのは、ボタンヘッダーとフッターが常に表示されている必要があります - コンテンツはスクロール可能でなければなりません. ボタンヘッダーは空にすることができます。したがって、スクロール可能なコンテンツはボタンヘッダーの上に移動する必要があります。ボタンがない場合、スペースを失う意味はありません。

したがって、絶対/固定配置はオプションではないようですので、相対で試しました。（絶対が解決策ではない理由は、コンテンツが絶対にそこに配置されている場合、ボタンヘッダーが空の場合にコンテンツが移動しないためです。）

高さをパーセンテージに設定しましたが、誰かがウィンドウのサイズを変更した場合、もちろん非常に見栄えが悪くなります。

ここを見て、出力ウィンドウのサイズを変更します。

動作する相対的に配置されたスクロール可能なコンテンツを取得する方法に関する悲しい試み

2 番目のバージョン:

（上部で）どのように動作するかを示すことです-コンテンツはページの上部に固定する必要があります-フッターはここで間違っています

4

1 に答える 1

1

柔軟な動作はテーブル行の動作によく似ていたので、CSS でそのようにしました。Firefox がメイン セル内で適切に動作するように、いくつかの余分な div を追加しました。

http://jsfiddle.net/willemvb/XMEcC/を参照してください

#container{
    position: relative;
    width: 300px;
    display: table;
    height: 100%;
}

#header, #footer{
    width: 100%;
    height: auto;
    display: table-row;
}

#main{
   height: 100%;
   display: table-row;    
}

#cell{
   display: table-cell;    
}

#wrapper{
    position: relative;
    width: 100%;
    height: 100%;   
}

#overflow{
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width:100%;
}

編集: FF と Safari でのみテスト済み

于 2012-10-25T17:24:23.540 に答える