css - モバイルで CSS の高さを設定値から動的に変更

Question

コンテナーの高さを 527px (デスクトップの背景の高さ) から変更して、背景画像を非表示にし、モバイルのときに背景色を div の下部まで引き延ばそうとしています。clearfix はブートストラップから処理されます。.partbackdrop クラス内に、長すぎるために表示されないいくつかの浮動 div があります。@media の #PartCarContainer を変更しても、固定値に設定する以外に、それに応じて調整されず、背景が div に引き伸ばされません。

リンクを削除しました。問題が解決しました。コンテナー内のすべての div の高さを auto に設定します。

CSS

#PartCarContainer { background-color: #FFFFFF; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); border-radius: 3px; overflow: visible; }
.partbackdrop { background-image: url(../../_common/img/backdrop.jpg); background-position: top center; height: 527px; }

@media (max-width: 767px) { 
#PartCarContainer { height: auto; }
.partbackdrop { background-image: none; }
}

HTML

<div id="PartCarContainer">
<div class="partbackdrop">
    Content
<div class="clearfix"></div>
</div>
</div>

編集:ページのフロートが原因で、フローティングの問題である可能性があります。また、フッターも同じ問題に苦しんでいる可能性があると思います。ウィンドウを 767px 未満に縮小すると、私の問題である赤い背景が表示されます。