CSS使用Bootstrap在響應式設計中強制內容低於固定DIV？

Question

當用戶開始滾動時，我有兩個固定在頁面頂部的DIV，這些DIV停留在頂部。

我有一個導航欄div，在此下方有一個搜索欄div。 導航欄可以在移動設備上正常運行，因為它在移動設備上和桌面上的高度相同，均為70px。 但是，搜索欄是一種表單，在桌面上高度為100px，但在移動設備上高度為200px。

因此，在移動設備上時，搜索欄下方的內容會被截斷。 什么是正確的處理方式？ 如果可能的話，我更喜歡純CSS的東西，但是我可以使用一些Javascript，但這是一個AngularJS項目，因此我需要格外小心，因為有些東西與JS有點接觸。

感謝您的幫助。

編輯以包含代碼。

這是搜索欄；

<div class="container">
    <div class="col-md-12 fixed-top" style="background-color: white">
        <div class="header-form" style="border: 2px solid purple; margin: 1%;">
            <div class="row">
                <form ng-controller="GetQuery" ng-submit="submitForm()">
                    <div class="col-md-6">
                        <div class="form-group label-floating">
                            <label class="control-label">Starbucks, McDonalds, etc..</label>
                            <input ng-model="form.keyword" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group label-floating">
                            <label class="control-label">City, State or Zip..</label>
                            <input ng-model="form.location" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" ng-click="Submit" href="#!view1" class="btn btn-primary btn-lg"><i class="fa fa-search"></i> Lets Go!</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

該欄跨越台式機的整個屏幕，在小屏幕上，它折疊並堆疊輸入。

所以，如果我有另一個容器在下面。

<div class="container">
     Some content..
</div>

在桌面上，此內容容器會很好，因為搜索欄僅高'x'像素。 但是，在移動設備上，內容容器將被部分覆蓋，因為現在搜索欄的高度為“ xx”像素。

Answer 1

您可以在CSS中使用媒體查詢，並在移動時定位到目標，為下面的容器提供更多的頁邊距頂部，在桌面的情況下為它提供較少的頁邊距頂部。 您遇到的問題與固定位置有關，這會導致固定元素脫離正常流程。