当用户开始滚动时,我有两个固定在页面顶部的 DIV,这些 DIV 留在顶部。
我有一个导航栏 div,下面有一个搜索栏 div。导航栏在移动设备上按预期工作,因为它在移动设备和桌面上的高度相同,为 70px。但是,搜索栏是一个表单,在桌面上高度为 100px,但在移动设备上它会拉长并接近 200px。
因此,在移动设备上搜索栏下方的内容会被 chop 。处理这个问题的正确方法是什么?如果可能的话,我更喜欢纯 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”像素。
最佳答案
您可以在您的 CSS 中使用媒体查询并在移动时定位,为下面的容器提供更多的顶部边距,当它是桌面时为其提供更少的顶部边距。 您遇到的问题与固定位置有关,这会导致固定元素脱离正常流程。
关于javascript - 在使用 Bootstrap 的响应式设计中,CSS Force 内容低于固定 DIV?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48132705/