私が試みていることが不可能ではないことを願っています。
最初に説明させてください。状況によっては背景を修正する必要があるレスポンシブ デザインがあります (メディア クエリ ブロック)。問題のデザインは次のとおりです。
http://think-open.at/fileadmin/templates/responsive/content.html
基本的に 2 つのメディア クエリがあります。1 つは最大の高さ用で、もう 1 つは最小の幅用です。ビューポートの高さが十分にある場合、コンテンツ領域にスクロールバーがあり、デザインの高さが固定されます。ただし、ビューポートが定義済みの高さを表示するのに十分な大きさでない場合、height-mediaquery は内側の div からスクロールバーを削除するため、2 つのネストされたスクロール コンテナー (body + div) がなくなり、コンテンツ領域が height: auto に設定されます。
ビューポートが狭すぎる場合はレスポンシブ メディア クエリもありますが、これは問題なく動作します。
今の問題: デザインがページ全体がスクロールするモード (高さ 830px 未満) に切り替わるとき、ビューポートからスクロールしないように、画像を「固定」コンテナに配置したいと思います。しかし、その後、ビューポートに関して背景画像を「固定」配置すると、コンテナdivに関して背景を実際に配置できないという問題が発生します。ここにCSSフィドルを作成しました：
http://dabblet.com/gist/ae5c3598e1465ce0c90e
幅を変更すると、問題に気づきます。画像の右端を緑色のボックスの右端に合わせたいと思います。
これはどういうわけか可能ですか？古いブラウザが検出された場合、CMS には単純な昔ながらのデザインを使用する条件があるため、calc() の使用に問題はありません。