2

固定サイズのdivにネストされた3行のCSSテーブルがあります。テーブルには3つの行があり、最初の2行の高さはコンテンツによって定義され（明示的なサイズは指定できません）、最後の行は単に残りの行を取ります。最後の行には、divである単一の子があり、。を持つ子がたくさんありdivsますdisplay: inline-block。私が抱えている問題は、divが常にオーバーフローしているので、でのみ発生する垂直スクロールバーを表示したいということですChromium。FF＆Operaは単に無視overflow-y:scrollして、コンテンツを使い果たします（IEは、私が持っていないのと同じだと信じています）。javascriptを使用せずに問題を解決できるかどうか、もしそうならどのように解決できるのだろうか。

HTML5すべてのブラウザの最近のバージョンでサポートされている限り、ソリューションのみを使用してもかまいません。

更新1-明確にしたかっただけです-高さが不明なコントロールをホストしているため、どの行にも明示的なサイズを使用できません。

<html>
<body>
    <div style="width: 500px; height: 300px;">
        <div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: #ccc;">Test</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: white;">Filter</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; height: 100%;">
                    <div style="height: inherit; overflow-y: scroll">
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</body>
</html>
4

1 に答える 1

4

解決策は次のとおりです（オーバーフローしたdivは絶対に配置し、別の比較的配置されたdivでラップする必要があります）。

<html>
<body>
    <div style="width: 500px; height: 300px;">
        <div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: #ccc;">Test</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: white;">Filter</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; height: 100%;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="overflow-y: scroll; position: absolute; top: 0px; right:0px; bottom: 0px; left: 0px;">
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</body>
</html>
于 2012-10-08T09:46:48.673 に答える