Bootstrap 3中的容器完全适应观众屏幕尺寸的高度

时间:2013-09-13 15:18:28

标签: twitter-bootstrap responsive-design containers twitter-bootstrap-3

这是问题所在。

我使用bootstrap 3.0作为一个非常非常基本的网站。不过,我想补充一些改进但我需要帮助。

网站的结构非常基础:容器内有container和几个jumbotrons

我希望每个Jumbotron能够完美地延伸到用户浏览器窗口的高度,这样无论媒体是什么(智能手机,网络等),访问者都会看到完全和仅当时只需要一个jumbotron,而不需要用鼠标向下滚动......

你知道吗? 非常感谢!! ;)

2 个答案:

答案 0 :(得分:14)

您可以将special CSS类添加到容器中,并将其设置为100%高度。 HTML和BODY也必须是100%高度......

html,body {height:100%;}
.special,.special .jumbotron {height:100%;}

演示:http://bootply.com/80826

然而,这并没有解决一次仅看到1个jumbotron的问题..这更像是导航问题而不是尺寸问题。如果您不希望用户向下滚动,您可能需要使用旋转木马作为jumbotrons。

答案 1 :(得分:0)

我相信你想要的实际上是堆叠,全屏,自适应背景,或堆叠符合窗口/视口高度的div。

这里已经回答了这个问题:

Full-screen responsive background image