使用导航栏让 Bootstrap 页面高度达到100%

Question

使用导航栏让 Bootstrap 页面高度达到100%

htmlcsstwitter-bootstrapresponsive-design

5

我将容器和正文高度都设为100%。我的导航栏在容器之外，因为它们的宽度不同。由于这个导航栏，浏览器会出现滚动条，而我不想要。我尝试使用float:left&width:100%来设置导航栏，但这样会使容器内容上移。有没有人有解决方法可以去掉滚动条？

- lch

可能的答案在这里：https://dev59.com/u3A75IYBdhLWcg3wbojM - bloC

1

你尝试过使用 body{overflow:hidden;} 吗？如果你只想在该页面上应用它，那么给 body 添加一个类，然后使用 overflow:hidden;。 - Steve K

overflow: hidden 会影响移动屏幕。 - lch

然后使用媒体查询在移动屏幕上允许溢出 @media screen and (min-width: 768px){body{overflow:hidden;}} 您可以根据需要使用768像素或更高的分辨率。 - Steve K

为外部div设置overflow:hidden，如果你需要滚动，请在内部设置为auto。 - Tanmay

1

你是否曾经找到了一个简单的解决方案？我觉得这应该内置在Bootstrap中。 - RayB

2个回答

1

你的容器高度可能是导致问题的原因。你需要考虑导航栏的高度，否则两者将超出视口的高度。

- Maëlig

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bay Max · Accepted Answer

我在创建一个带有单独表单的导航栏时遇到了类似的问题。对我造成问题的是form-group水平类，它具有添加容器上额外填充的display:table类型。解决这个问题的方法是在我的容器中添加18像素的额外填充。
您应该检查页面并检查导致水平滚动的精确元素和CSS。同时，请提供包括CSS和JS的HTML和页面以更深入地研究此问题。