[英]100% height with twitter bootstrap and container-fluid
我已经看到了一些关于占据100%屏幕的div的问题,但没有一个完全符合我的要求。 我猜最接近的是:
如何使用twitter bootstrap使多个列消耗100%的高度?
这个问题是它不使用twitter引导程序约定,而且我还有一些额外的div嵌套。
相关的代码段在这里:
<!-- Standard bootstrap fixed header -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- here is the interesting section -->
<div id="app-container" class="container-fluid" style="background-color: red;">
<div id="app" class="row-fluid" style="background-color: blue;">
<div id="menu" class="span2" style="background-color: green;">
Menu
</div>
<div id="content" class="span10" style="background-color: purple;">
Content
</div>
</div>
</div>
和jsFiddle的链接: http : //jsfiddle.net/djMJX/18/
我需要的:
我尝试过将高度和最小高度设置为100%的各种变化。 问题似乎来自额外的排液。 我已经接近所有div到达页面底部的位置,当内容足够短时它看起来很好,但是当内容超出页面高度时它就崩溃了。
我感谢任何帮助。 谢谢!
我们最近开始使用Bootstrap,但是作为一个Web应用程序,我们在使用100%高度的网格系统时遇到了困难。 我们的解决方案是使用一些使用Flexible Box Layout模块的辅助css类来补充Bootstrap网格。
这是规范中的摘要:
该规范描述了针对用户界面设计优化的CSS盒模型。 在flex布局模型中,flex容器的子节点可以在任何方向布局,并且可以“弯曲”它们的大小,要么增长以填充未使用的空间,要么缩小以避免溢出父节点。 可以容易地操纵儿童的水平和垂直对齐。 这些框的嵌套(水平内部垂直或垂直内部水平)可用于构建二维布局。
以下是一些进一步的细节......
然而,规范仅在候选推荐阶段,所以它仍然是新的。 您还需要考虑浏览器支持...
如果您确实需要支持旧版本的IE,则可以使用polyfill:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.