1

固定高さの子テキストエリアを含む固定高さの div があります。

クロムでは、div と textarea の両方が同じ高さの場合、div にスクロールバーが表示されます (overflow:auto に設定されている場合)。これは firefox では発生せず、2 つの div 要素をネストした場合にも発生しません。

以下に簡単な例を示します。

<div style="height:100px; margin:0; padding:0; overflow:auto">
    <textarea style="height:100px; margin:0;padding:0;border:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue metus, pulvinar in accumsan ut, malesuada quis sapien. Curabitur eleifend massa ac arcu congue, eu aliquet enim porta. Integer tristique tristique placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum, arcu eget pulvinar sodales, quam metus pharetra felis, vel commodo enim eros a eros. Maecenas placerat ullamcorper odio, et viverra tellus tempor non. Proin iaculis non eros id convallis. Nullam tellus mauris, congue ut laoreet sit amet, mollis tempus lacus. Duis lacinia commodo convallis. Suspendisse mollis lectus a tristique mattis. Nullam gravida dictum purus a sagittis. Cras in sapien nec nulla porta consequat.
    </textarea>
</div>

フィドル: http://jsfiddle.net/MBn7Y/

textarea 要素を同じコンテンツとプロパティを持つ div に置き換えると、問題は発生しません。

なぜこれが起こっているのか知りたいです。オーバーフローを非表示に設定すると、div のスクロールバーが削除されますが、私の特定のケースはもう少し複雑で、オーバーフローを非表示にするのは見栄えがよくありません。

私のFirefoxのバージョンは24.0で、Chromeは29.0.1547.76で、どちらもLinux Mint 13で実行されています.Chromium 28.0.1500.71でも同じ問題があります

説明がある人に事前に感謝します！

編集：

ここにフィドルのスクリーンキャップがあります: http://i.imgur.com/CcW2pAK.png

テキストエリアではなく、右端のスクロールバーを削除したい。テキストが長いため、テキストエリアにスクロールバーが表示されるのは当然のことです。私が理解できないのは、なぜ親 div もスクロールバーを取得するのですか?

クラスでサイズを設定すると、問題は発生しません。(例: http://jsfiddle.net/KPjak/ )

私の場合、高さはjavascriptによって設定され、可変であるため、クラスは解決策ではありません。

4

3 に答える 3

2

cssの外側に適用されているテキストエリアの下マージンまたはパディングと関係があると思います。なぜこれが起こるのかについては、手がかりがありません.あなたのお父さんに聞いてください.

5％のマージンまたはパディングのようです。私のフィドルを見てください。 http://jsfiddle.net/MBn7Y/6/

親にスクロールが表示されなくなるまで高さを下げ、%95％になりました。

最後のバージョンはmargin-bottom: -5%;、親要素の全高を一致させながら表示および機能します。

**CSS**
textarea {
    margin-bottom: -5% !important;
}
于 2013-11-06T16:43:03.120 に答える
0

次の CSS スニペットを使用して、スクロールバーの削除をターゲットにすることができます。

element::-webkit-scrollbar { 
    display: none; 
}

これを次のフィドル内で複製しました（インラインスタイルの一部をクラスに置き換える必要がありました）：http://jsfiddle.net/MathiasaurusRex/MBn7Y/3/

于 2013-11-06T16:15:31.970 に答える