web-dev-qa-db-ja.com

「オーバーフロー:自動」の幅を含めるにはどうすればよいですか。動的なサイズの絶対divのスクロールバー?

(Stack Overflowに関する最初の質問です。正しく実行していることを願っています。)

コンテンツから幅を継承するフローティングメニューを作成しようとしています(幅が事前にわからないため、つまりURLから読み込まれるため)。これを行うには、幅や高さを設定せずにメニューdivを絶対に配置します。

この問題は、コンテンツの高さがスクロールを必要とするほど高い場合に発生します。 「オーバーフロー:自動」を設定しました。垂直方向にスクロールできるようにしますが、新しいスクロールバーではdivが広くなりません。代わりに、divは同じ幅のままで、スクロールバーは以前の適切なサイズのコンテンツに突き出て、コンテンツを強制的に折り返します。

例: http://jsfiddle.net/w7Mm8/

例:Firefoxでは、「five」は次の行に折り返されますが、Chrome(少なくともMacの場合)では、すべてが1行に表示されます。

スクロールバーの幅を含むようにメニューの幅を明示的に設定せずにこれを行うエレガントな方法はありますか?

ありがとう!

28
Tristan

いくつかのオプションがあります。

使用する - white-space:nowrap; およびいくつかのpadding

使用する - overflow: scroll; 、これは下部に余分なスクロールバーを追加しますが、Firefoxの折り返しの問題を修正します。

使用する - overflow-y:scroll これはCSS3であり、最新のブラウザーでのみサポートされています。

4
bookcasey

たまたまこれに出くわしました。設定white-space: normal実際にFirefoxを作成しましたスクロールバーを外側に押します。 http://jsfiddle.net/w7Mm8/36/ を参照してください。

編集待つ...5つだけではありません(前のフィドルには6つの単語がありました): http://jsfiddle.net/w7Mm8/37/ 。どういうわけか、余分な単語がそれを動作させました。

Edit2:上記の奇妙な観察に基づいています(white-space: normalは実際にはそれとは何の関係もありませんでした、それは余分な単語でした)、一部の人にとっては役立つかもしれない(そして他の人にとっては苦痛である)奇妙な「回避策」があります。 (5ワード) http://jsfiddle.net/w7Mm8/49/ 、(6ワード) http://jsfiddle.net/w7Mm8/57/ を参照してください。 contentは3文字に設定する必要があり、スペースにすることはできません(私の実験から)。 :疑似要素は、テキストコンテンツの深さである必要があります。つまり、以下を参照してください。 http://jsfiddle.net/w7Mm8/58 / 機能しない場合。

1
ScottS