17

次のCSSスタイルでdivクラスを設定しています。

div.multiple_choice{
    border: 1px solid black; 
    max-width: 300px; 
    max-height: 200px; 
    overflow: auto;
}

問題は、内部のテキストがDIVを最大高さ200pxに到達させない場合でも、垂直スクロールバーが表示されることです。上下の矢印をクリックできますが、コンテンツが上下に移動するのは約1ピクセルか2ピクセルだけです。

これは、Google Chrome（バージョン18.0）およびIceweasel11で発生しています。

4

8 に答える 8

13

結局のところ、別のCSSスタイルが問題を引き起こしていました。

body{
    line-height: 1;
}

これが問題を引き起こす方法と理由について知りたい人は、ここでline-heightプロパティについて読むことができます。

于 2012-04-20T18:47:22.260 に答える
6

私はこの問題に遭遇しましたが、次のcssスタイルを使用してこれを解決しました：

div.yourcontainer{overflow-y:auto;}

コンテナが最大高さよりも高い場合は、垂直スクロールバーが表示されます。

于 2013-05-07T02:41:18.477 に答える
5

私はこれに問題を抱えていましたがposition: relative、子要素を持っていることが問題の原因であることがわかりました。明らかに、これはすべての人にとって解決策になるわけではありません。特にposition: absolute使用されている場合はそうですが、私にとってはうまくいきました。

于 2015-07-28T13:59:02.597 に答える
3

@Kuba Orlikのソリューション（彼は受け入れられた回答にコメントとして投稿しました）を証明するために、それが私のために働いた唯一のソリューションです。

内部要素にこれを追加します。

line-height: normal;

注：それが異なるため、明示的にでnormalはありません1

于 2021-03-02T13:42:25.240 に答える
2

反応コンポーネントのリスト（フレックス列）をdivでラップしようとしたときにこの問題が発生しました。各リスト項目内の要素のマージンを0に変更することで、この問題を解決しました。

私にとってこれをトラブルシューティングするためのアプローチは、リストアイテム（おそらく<li>OPのそれぞれ）を調べて、各リストアイテムが人間の目に見えるものよりも大きいとdivに思わせるスタイルを確認することでした。

これは、私のプロジェクトのリストアイテム内のアイコンの不正なマージンを検査する例です。 不正証拠金の例

解決策は、そのアイコンのスタイルを垂直方向のマージンが0になるように設定することですが、私のアプリケーションでは、すべてのマージンを0にして、右にパディングを追加しました。

不正マージンの例を修正

于 2017-07-05T00:46:35.777 に答える
1

Bootstrapとnavを使用してもこの問題が発生しました。これは、ブートストラップがnav-tabsのliを次のように検出するために発生しました.nav-tabs > li { margin-bottom:-1px; }。これに対抗するには、次のことも行う必要があります。

.nav-tabs > li:last-child {
   margin-bottom:0;
}

最後の子を設定しない場合、次の例では、リストに含まれるコンテンツの量に関係なく、常にスクロールが表示されます。

<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
  <li></li>
  ...
</ul>
于 2013-07-02T21:52:42.183 に答える
1

私は今日早くこのバグに出くわしました。私の場合、子要素のリストには、display：blockではなくdisplay：inline-blockがありました。表示に切り替える：切り捨てられたdiv内の子要素のリストをブロックすると、問題が修正されました。

于 2015-01-20T22:34:03.960 に答える
1

私の場合、問題はフォントにありました。を使用しますfont-family: Galano Grotesque。どうやら、このフォントは計算された高さよりも高くレンダリングされます。

<div>
    <p>some text</p>
</div>

したがって、がなくてもmax-height、内側pと外側divの両方が高さとして計算された場合、フォントが予想よりもほぼ高かったため20px、スクロールバー（あり）がありました。overflow: auto1px

したがって、解決策は次のいずれかになります。

  • 別のフォントを使用してください。
  • padding外側に追加しdivます。このように、フォントから来る余分なピクセルをカバーするのに十分な大きさになります。私の場合、下部に1ピクセル、上部に1ピクセルのパディングを追加すると、問題が解決しました。
  • フォントに干渉しないようにline-height、少し大きい値（私の場合はfrom1.25から）に設定します。1.4
  • 実際の値はフォントの影響を受けるため、に設定line-heightします。normalただし、Mozillaによると、これは推奨される方法ではありません。
于 2021-01-27T10:27:33.020 に答える