web-dev-qa-db-ja.com

position：fixedのdiv内のスクロールバーを持つDiv

いくつかのメニューのコンテナdivであるposition：fixedを持つdivがあります。常にビューポートを満たすようにtop：0px、bottom：0pxに設定しました。そのdivの中に、他の2つのdivが必要です。その下のdivには多くの行が含まれ、overflow：autoがあります。コンテナdiv内に含まれることが期待されますが、行が多すぎる場合は、単に固定divの外側に展開されます。以下は私のコードと明確にするためのスクリーンショットです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MyPlan</title>
    <meta name="X-UA-COMPATIBLE" value="IE=8" />
    <style type="text/css">
        #outerfixed { position:fixed;  width:200px;  background-color:blue; padding:5px; top:0px; bottom:30px;}
        #innerstatic1 { width:100%; background-color:yellow; height:100px;}
        #innerstatic2 { overflow:auto; background-color:red; width:100%;}
    </style>
</head>
<body>
    <div id="outerfixed">
        <h3>OUTERFIXED</h3>
        <div id="innerstatic1">
            <h3>INNERSTATIC1</h3>
        </div>
        <div id="innerstatic2">
            <h3>INNERSTATIC2</h3>
            line<br />
                        ...lots of lines
            line<br />
        </div>
    </div>
</body>
</html>

alt text

これを行う方法はありますか？繰り返しますが、＃innerstatic2を#outerfixed内に適切に含め、＃outerfixed内にあるスペースよりも大きくなった場合にスクロールバーを取得する必要があります。

＃innerstatic2も修正することでこれを回避する可能性があることを知っていますが、可能であれば#outerfixed内のフロー内にあるようにしたいので、＃outerfixedをどこかに移動すると内側の要素が付属します。

編集：#outerfixedにoverflow：autoを設定し、全体にスクロールバーを取得できることは知っていますが、＃innerstatic2にスクロールバーが特に欲しいのはグリッドであり、グリッドだけをスクロールしたいです。

誰でも？可能？

csscss-position
40
Einar Egilsson

Ulとheightに絶対位置を100％与えることで解決しました

ul {
  overflow-y: scroll;
  position: absolute;
  height: 100%;
}

このFIDDLEを確認してください

18
Ofir D

overflow-y:scroll;

これをiOSデバイス用に追加します。タッチを使用してより良いスクロールを提供します。 overflow-yはスクロールする必要があります！安全な理由のため。一部の人にとっては自動は機能しません。または少なくともthatsは私が聞いたこと。

-webkit-overflow-scrolling: touch;

6
Dyrehauge

outerstaticedの高さとinnerstatic2のmax-heightを設定する必要があります

これが役立つかもしれません [〜＃〜] demo [〜＃〜]

2
Afshin

理想的ではありませんが、これで90％の道が開けます

<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
        <div style ="width:15em; background-color: green;">
                Title
        </div>
        <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
                <div style="height:100em; background-color:red; width:10em;">
                        scroll<br/>
                        scroll<br/>
                        scroll<br/>
                </div>  
        </div>  
</div>
1
SooDesuNe

Overflow：auto属性を使用する必要があるのは、コンテナdivです。この場合、＃outerfixed div

1
Alejandro Martin

私が考えている唯一の方法は、innerstatic2を絶対位置に設定することです（したがって、上下を使用してouterfixedに関連してサイズを設定できます）、次にinnerstatic2テキストを配置する別のdivを作成します。次に、innerstatic2に「overflow：auto;」を指定します。表示。この方法の欠点は、innerstatic1が絶対位置にある必要があるため、innerstatic1が大きくなったときにinnerstatic2が下に移動しないことです。移動する必要がある場合は、「position：relative」にする必要がありますが、固定高さを設定する必要があります。どちらにしても、妥協する必要があります。

すべてのブラウザが計算サポートなどの新しいCSS3機能をサポートすると、これらの欠点なしに、これを行うためのより良いオプションがあります。

1
Eric J. Francois