コンテンツに対して親divの高さを設定しますが、親マージンの外側にコンテンツを配置する

Question

コーナーに自分自身をデザインするには少し助けが必要です！私は私があなたを通じ話しましょうどの達成しようとしているもののラフなワイヤーフレームを添付しました：

rough wireframe

だから私は、ヘッダ（固定）とフッター（固定されていない）と、完全な大きなを持っていますページ画像。下のボックスは単色で、中央のコンテナはこのコンテナのマージンの約5％上と下に座っています。このコンテナ内にはテキストとイメージがあり、そのうち2つはフレックスボックスを介して垂直スラックを制御します。これはおそらくスライドショーになる予定の下に別のフルページの画像があります。残りのページは未定です。

私は、センターセクションの背景画像の余白、絶対的な位置付けなどで遊んできました。私はこれについて最善の方法を知りません。トップセクションをオーバーレイするのは簡単ですが、中央のコンテナのエッジではなく、ソリッドカラーのエッジに突き当たる次のセクションを取得することは困難です。

私のクライアントは他の場所でも同じようなものを見ましたが、URLは表示されず、送信されているため、基礎となるコードを見ることができます。

賢いアイディアがあれば幸いです。

おかげ

Answer 1

これは私がしようとするものである...コンテンツの高さ、背景画像のない高さと中央のコンテナの

と思います。 3つのすべてのコンテナでバックグラウンドカラーが同じになるように、中間のコンテナに一致する背景色を設定します。中央のコンテナに背景イメージを与え、イメージのサイズを制限して中央に配置すると、一致する色はイメージがカバーしない場所を示します。