45

私のCSSは次のようになります。

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

div の高さと幅は自動的にスケーリングされます。ただし、高さの最大値は固定されています。この値に達するとすぐに垂直スクロールバーが表示されます。これはすべてうまくいきます。

ここでの問題:垂直
スクロールバーが表示される場合、スクロールバーは. ただし、垂直スクロールバーによって使用されるこれらの追加の 10 ピクセルを考慮して 、幅は自動スケーリングされません。垂直スクロールバーを追加する前の水平幅は (設定から予想されるように) コンテンツにぴったりだったので、現在は水平スクロールバーも表示されます - 不足している 10 ピクセルを考慮してください。これはばかげています。div
width:autodiv

  • divこれらの水平スクロールバーを回避し、垂直スクロールバーが収まるように幅を自動スケーリングするにはどうすればよいですか?

可能であれば、水平スクロールを完全に無効にすることに依存しないソリューションを探しています。これは、おそらくある時点で（つまり、特定の入力のために）必要になるためです。

4

5 に答える 5

26

かなりまずまずの解決策を見つけました（少なくともこの問題の私のバージョンでは）。

問題は、 ;width: autoと同様に動作することだと思います。width: 100vw問題は、垂直スクロールバーが表示されたとき、ビューポートの幅は同じまま (~10px のスクロールバーがあるにもかかわらず) ですが、表示可能な領域(私が呼んでいるように) は 10px 減少することです。

どうやらパーセンテージで幅を定義すると、この「表示可能領域」の観点から定義されるため、コードを次のように変更します。

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: 100%;
  overflow: auto;
  ...
}

コンテンツを適切に再スケーリングできるようにする必要があります。

ps 代わりに を追加することもできますoverflow-x: hidden。これにより、水平スクロールバーが表示されなくなります。代わりに、垂直スクロールバーが表示されたときに div の右側から ~10px を切り取るだけです。

于 2015-04-27T00:28:17.250 に答える
16

私は機能しているが完璧にはほど遠い解決策を見つけました：

padding-right : 15pxdiv全体を自動的に拡大するために、divにを追加しました。これで、垂直スクロールバーが表示された場合、それらはパディング内に収まるため、水平方向の幅は問題ありません。

残念ながら、もちろん、垂直スクロールが不要な場合にもパディングが表示されるため、divが必要以上に少し広くなります...：/私の目には、これは不要な水平スクロールバーよりも望ましいです。

于 2012-12-10T14:10:51.710 に答える