0

次のようなWebアプリ用の絶対配置ウィジェットを作成しようとしています:

+-----------+ <-- top: 10px
| Header    |
| Desc ln 1 |
| Desc ln 2 |
+-----------+ <-- moves down as more lines added to the description 
| Scrolling |
| content   |
|           |
|           |
+-----------+ <-- bottom: 10px

基本的に、ヘッダーとその下にスクロールするコンテンツがあります。説明に行を追加するにつれて、スクロール コンテンツ領域を小さくしたい。また、ヘッダーの上部とスクロール コンテンツの下部をビューポートの上部と下部に固定する必要があります。

これが私のプランカーの試みです: http://plnkr.co/edit/LdYl7e7GYhdGiF3NQ0Bv

ご覧のとおり、中央の線をヘッダーの高さに接続する方法を理解できませんでした。

JavaScript でそれを行う方法を見つけられることはわかっていますが、純粋な HTML/CSS でそれを行うことができるようにしたいと考えています。

4

1 に答える 1

0

継承された高さと表示の仕様を使用してみることができます<table>。

デモが分岐しました: http://plnkr.co/edit/45f0SCrdrNzHJFZLsa8w?p=preview

#headerコンテンツを 1つまたは2 つ<div>に追加#contentし、スクロールする内容を確認します。

#headerwindow よりも高くなると、すべてが拡大し、ウィンドウがスクロールします 。

<div>内でのみ#contentスクロールできます。

おっと、FF には問題がありました。http://plnkr.co/edit/xBJuqnxBuFwfTV2BAAWl?p=preview

于 2013-06-16T22:54:56.983 に答える