0

赤い領域を表示可能な領域の残りの部分に塗りつぶすが、現在のようにフッターに拡張しないようにする方法はありますか？また、infoContent部分をスクロール可能にする必要があります。ヘッダー部分の高さは可変です。

JavaScriptを使用すると言われている数年前の回答をたくさん見つけましたが、それを回避するために最新のブラウザーで使用できる手法はありますか？

HTML：

<div id="page">
<aside id="infoBar">
        <header>Variable Sized Header</header>
        <div id="infoContent">
            <div>First Content Item</div>
            <div>Second Content Item</div>
            <div>Third Content Item</div>
        </div>
    </aside>
    <footer id="footer">Footer</footer>
</div>

CSS：

#footer { position:fixed; bottom: 0; height: 50px; background-color: rgba(0, 0, 255, 0.5); width: 100%;}

#infoBar { position: fixed; right:0; top: 0; bottom: 50px; padding: 5px; border: 1px solid black; width: 200px; }
#infoBar > header { height: 50px; }

#infoContent { height: 100%; background-color: red; overflow-y: auto; }
#infoContent > div { margin: 5px; height: 50px; background-color: yellow; }

これがいじくり回すフィドルです：http：//jsfiddle.net/gWmtD/

4

2 に答える 2

2

テーブルを使用することが最初に思い浮かびました: http://jsfiddle.net/gWmtD/9/

インライン CSS を使用したのは、プロトタイプを作成するのが簡単で、行った変更を簡単に確認できるためです。

<div id="page">
    <aside id="infoBar" style="overflow-y: auto;">
        <table style="height:100%; width:100%;">
            <tr>
                <td>
                    <header>
                        Variable Sized Header
                    </header>
                </td>
            </tr>
            <tr>
                <td style="height:100%; width:100%;">
                    <div id="infoContent">
                        <div>First Content Item</div>
                        <div>Second Content Item</div>
                        <div>Third Content Item</div>
                    </div>
                </td>
            </tr>
        </table>
    </aside>
    <footer id="footer">Footer</footer>
</div>



編集: FireFox でページを下にスクロールするときにスクロールバーを有効にするには、次のプロパティを追加します。

overflow-y: auto;

これにより、必要な場合にのみ y スクロールバーが表示されます。これは Chrome ではデフォルトで発生し、Chrome では次のように設定してオフにすることができます。

overflow-y: none;
于 2013-01-18T23:25:29.463 に答える
-1

簡単な Google 検索で、スクロール バーのオーバーフロー メソッドが明らかになります: http://www.w3schools.com/cssref/pr_pos_overflow.asp

他の問題については、最初に css ラッパー クラスを調べる必要があります。

于 2013-01-18T23:27:05.860 に答える