ここにCodePenがあります：
http://codepen.io/CWSpear/pen/BCriE
アイデアは、アプリにサイドバーがあり、「展開」をクリックしてコンテンツ領域を全幅にすることができるということです。サイドバーを引き続き表示したい場合は、[フライアウト] をクリックしてコンテンツの上にサイドバーを再表示できます (つまり、iPad のメール アプリのように、ポートレート モードでフライアウトするオプションしかない場合があります)。
JavaScript が非常にシンプルになり、すべてが CSS トランジションで行われるため、クラス トグル アプローチを採用しました。
問題は、コンテンツ領域のヘッダー/ツールバーに幅がないため、常にコンテンツ領域の全幅である必要がありますが、展開をクリックすると、幅を除いて他のすべてが機能しますヘッダーは変更されません。
これは Webkit でのみ発生します。「100％」とは何かを計算しているようで、コンテンツのパディングを変更しても（ボックスのサイズ変更によりコンテンツが広くなります）、ヘッダーは同じ幅のままです。帰りは逆のようです。もう一度展開をクリックすると (これは通常、今考えてみるとおそらく折りたたまれます)、ヘッダーが全幅になりますが、コンテンツにパディングが追加されるため、幅は再調整されず、ヘッダーは内容に対して広すぎる。
説明しましょう：
前：
[展開] をクリックすると、次のようになります。
予想される内容は次のとおりです。
Firefoxでうまく機能します。また、ウィンドウのサイズを手動で変更すると、領域が再描画され、ヘッダーが修正されることにも注意してください (これが、実際に「期待される」スクリーンショットを取得した方法です)。JavaScript でサイズ変更をトリガーしてもうまくいかないようです (再描画がトリガーされるとは思わないため)。
明示的な '100%' 幅を設定しようとしましたが、ヘッダーにパーセンテージ幅を設定しようとする他の JavaScript のトリックとハックはうまくいきませんでした。
他の誰かがこれに遭遇したか、修正しましたか?
Safari 6.0.1 と Chrome 22.0.1229.79 で機能しなくなり、Firefox 15.0.1 で動作しました。チャンピオンのように、その Firefox。
[更新] アーレンがマージンに切り替えることで修正できたため、パディングのみに関連しているようです。コンテンツの幅が自動であるため、これは機能します。幅が 100% だと壊れてしまいます。
ここのデモ: http://codepen.io/CWSpear/pen/uvFJh
width: 100%マージンは、エレメントを装着するまでうまく機能しbox-sizing: border-boxます。
なんらかの理由で、私が取り組んでいる実際のプロジェクトでは、設定するとコンテンツが完全に崩壊しwidth: autoますdisplay: block。私はそれを再現し、そのための CodePen を投稿しようとしています。
これは本当に Webkit のバグですか? 他の選択肢はありますか？