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中使用媒体查询，并在移动时定位到目标，为下面的容器提供更多的页边距顶部，在桌面的情况下为它提供较少的页边距顶部。 您遇到的问题与固定位置有关，这会导致固定元素脱离正常流程。