html - コンテンツが制限より小さい場合に消えるスクロールバーを HTML に追加する方法

Question

拡張可能なウィジェットを持つフォームを作成しようとしています。問題は、ウィジェットが開いているときに、フォームがコンテンツ ボックス内の制限を超えてはみ出し、見栄えが悪いことです。

使用してみoverflow:scrollましたが、コンテンツがコンテンツボックスよりも小さくても消えない2つの醜いスクロールバーが作成されます。垂直スクロールバーが 1 つだけ必要です。

Visual Studio は、overflow-y が CSS で使用できないことも警告しました。

Answer 1

オーバーフローを変更してauto、要素の高さおよび/または幅を定義します。

Answer 2

overflow-xおよびoverflow-yCSS3 提案の一部であり、ビッグ 4 ブラウザの現在のすべてのバージョンで動作します。

私は通常、次のことを行います。

overflow: auto;
overflow-x: auto;
overflow-y: auto;

その理由は、コンテンツが一方向にオーバーフローするとすぐにブラウザーが (2 つの醜いスクロールバー) として処理することがありますが、それらのブラウザーは優先される と を既にサポートoverflow: autoしているためです。overflow: scrolloverflow-xoverflow-y

Answer 3

Swilliams は、症状の治療方法について適切な回答を提供しました。ただし、根本的な原因についても考えてみてください。コンテンツ ボックスが固定サイズに制限されていない場合、スクロール バーがなくても、任意のサイズのフォームに合わせて縮小または拡大できます。Web ページは柔軟に設計されており、その柔軟性を「修正」しようとすると、通常、この種の問題が発生します。