0

私の例については、次の URL を参照してください。

http://wiredbeast.com/bordermenu/test.html

コード：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="position:absolute;top:0;right:0;left:0;bottom:0;background:green;overflow-y: auto;">
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <div style="position:absolute;top:0;right:0;width:227px;bottom:0;background:red;"></div>
    </div>
</body>
</html>

基本的に、緑のコンテナのオーバーフローをアクティブにするためにウィンドウを縮小すると、赤いサイドバーが下まで伸びません。オーバーフローがあっても、サイドバーを親の高さ全体に広げるにはどうすればよいですか?

4

2 に答える 2

0

bottom:0;外側の div を設定しています。それが問題の原因です。

これを設定することで、divの高さを画面下部に設定します。したがって、ウィンドウを展開するたびに、赤い div はそのままの場所で消えてしまいます。

  • bottom:0;外側の div スタイルから削除します。

そして、常に高さを与える方が良いです。

  • height:100%赤いdivに追加

お役に立てれば。

于 2013-11-06T23:27:44.150 に答える