0

div でフォント サイズ、ファミリ、および行の高さを設定しようとしています。次に、レイアウト用の div の正しい高さを知る必要があります。ただし、取得している高さが間違っており、おそらく同じ理由でスクロールバーが div の親に表示されています。次の jsfiddle は私の問題を最もよく示しています: http://jsfiddle.net/JYkAX/19/

html は次のとおりです。

<div class="separator">
    <div class="PleaseNoScrollBar"> 
        Some Text Here
    </div>
</div>

CSSは次のとおりです。

.separator
{
    background: gray;
    display: block;
    overflow: auto;
}

.PleaseNoScrollBar
{
    font-family: cursive;
    background: lightgray;
    line-height: 32px;
    font-size: 32px;
    display: block;
    opacity: 0.5;
    vertical-align: top;
}

次の jquery は、div の外側の高さを取得します (ただし、正しくありません)。

alert($(".PleaseNoScrollBar").outerHeight());

これを引き起こしている原因についてのアイデアはありますか? 残念ながら、div の実際の外側の高さを取得できるようにする必要があります。親 div を大きくすることはできません。

スクロールバーは Chrome と IE でのみ表示されます。Firefox では、マウスをドラッグして div をスクロールできますが、スクロールバーは表示されません。

4

3 に答える 3

1

overflow:auto;に設定したスクロールバーが表示されてい.separatorます。削除するだけで、スクロールバーがなくなります。

高さに関しては、アラート関数は「32」を取得します。これは、div の正しい高さだと思います。

于 2013-03-22T17:03:14.143 に答える
0

overflow:autoコンテナ div から宣言を削除します。

.separator
{
    background: gray;
    display: block;
    overflow: auto;
}

w3c仕様から...

overflow: auto「auto」値の動作はユーザー エージェントに依存しますが、オーバーフローしたボックスに対してスクロール メカニズムが提供されるようにする必要があります。

ソース: http://www.w3.org/TR/CSS21/visufx.html#overflow

これは、ブラウザーをコーディングした人々がどのように機能するかを決定することを意味しoverflow:autoます。divの高さ. separatorを 34px に設定すると、スクロールバーがなくなります。

をdivoverflow:autoから削除することをお勧めします。.separator

これをチェックしてください：http://jsfiddle.net/JYkAX/26/

コンテナー div の高さが、子要素の高さより 2 ピクセル未満大きい値に設定されている場合、スクロールバーが表示されます。私の推測では、「overfow auto」が宣言されたときに、ブラウザーが上下の両方に追加される 1px の境界線を追加します。

于 2013-03-22T17:02:04.857 に答える