問題タブ [viewport-units]

フレックスボックス ベースのレイアウトを使用して、ページの固定フッターを取得しようとしています。これは Chrome と Firefox ではうまく機能しますが、IE11 ではメイン コンテンツの直後にフッターが配置されます。つまり、メイン コンテンツは、利用可能なすべてのスペースを埋めるために引き伸ばされません。

vhコンテナーの高さの単位がIE で測定されている場合、フレックス レイアウトでメイン要素を伸ばすにはどうすればよいですか? この動作が IE がフレックスボックス仕様を実装する方法のバグの結果であるかどうかを調べていましたが、この問題についての言及は他に見つかりませんでした。

JSFiddleデモ

ビューポート単位 (vh、vw) の高さとフォント サイズを持つ div を使用して、1 ページのスクロール サイトを構築する予定です。

古いブラウザーでのサポートの問題を認識していますが、vminpolyを使用してページの読み込みを増やすことに興味はありません。

一方、Buggyfillは、より小規模ではありますが、ブラウザ間の互換性のための部分的なソリューションになる可能性があります。

別の解決策として、 css-tricksに記述されているサポートをテストし、後で jQuery を使用して影響を受ける要素のサイズを変更することもできます。

ビューポート ユニットをサポートするためのアプローチは何ですか?

合理的なブラウザー互換性のための別の簡単な解決策を知っていますか?

Safariの場合、次のことが機能していません。誰かが私が間違っていることを特定できますか?

すべてのメソッドは、Safari で個別にサポートされています。-webkit-calc も役に立ちません。

ありがとう！

div で 100 vw と 100vh を使用してフルスクリーン フレームを作成しようとしています。この JSfiddleには 2 つあり、ご覧のとおり、各フレームの下部と右側の両方に余分なスペースがあります。

vw と vh を使用して、余分なスペースなしで完全にフィットさせる方法はありますか?

css は次のようになります。

※編集：横幅を100%にすれば解決するようですが、この解決法でよろしいでしょうか？それは何かを壊しますか？

ページの上部に画像スライダーがあり、vh で画面に収まるように設定されています。

そして、iPhone でどのように見えるかを調べていると、明らかに何か問題があります。画像が伸びるので、たくさんスクロールする必要があります..助けてください.

これが私のコードです：

CSS:

Safari で非常にニッチな問題の CSS の問題が発生しています。

次の CSS ルールがあります。

calcこれは Chrome では機能しますが、Safari ではとの組み合わせが気に入らないようですvh。（たとえば、 に置き換えるvhと機能%しますが、に基づいて計算するvhか、適切な代替手段を計算する必要があります。）

これを機能させる方法はありますか？vhまたは、それを参照する別の方法はありcalcますか? Safari に適していますか?

CSS3列を使用してWindows 8の横スクロールと複数列のレイアウトを模倣しようとしていますが、列の幅を固定するか、フィドルで行っているように、ビューポートの幅が必要です。

現在、使用しているユニットの種類に関係なく、設定した幅に関係なく、列がコンテナー div に自動的に収まるように見えます。

私のフィドルでは、列を に設定すると35vw、同じ幅の 2 つの列が得られます。私の知る限り、2 つの列が完全に表示され、3 番目の列の一部が表示されるはずですが、そうはなっていません。この動作はpx、emまたは%ユニットとして設定した場合にも発生します。

これはブラウザのデフォルトの動作ですか、それとも何か不足していますか?

CSS に以下のプロパティを含めました。

これにより問題が発生しますか?