HTML＆CSS + Twitter Bootstrap：全页面布局或高度100％ – Npx
我试图做出以下布局：
+-------------------------------------------------+ | Header + search (Twitter navbar) | +------------+------------------------------------+ | | | | | | |Navigation | Content column | | | | | | | | | | | | | | | | | | | +------------+------------------------------------+ | Footer | +-------------------------------------------------+ 布局必须采取所有可用的高度和宽度，导航和内容列采取所有可用的空间和滚动溢出，页脚应坚持底部。
HTML看起来像这样：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> <link href="css/app.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/app.js"></script> </head> <body> <div class="container-fluid"> <div class="navbar"> <!-- navbar content --> </div> <div class="row-fluid columns"> <div class="span2 article-tree"> <!-- navigation column --> </div> <div class="span10 content-area"> <!-- content column --> </div> </div> <div class="footer"> <!-- footer content --> </div> </div> </body> </html>
CSS：
body, html, .container-fluid { /// take all available height height: 100%; } .article-tree { color: #DCE6E5; background: #2F323B; } .content-area { overflow: auto; height: 100%; /// explicit height to make scrolling work } .columns { height: 100%; /// columns should take all height margin-top: 42px; /// minus header margin-bottom: 20px; // minus footer } .columns > div { height: 100%; // make each column to take all available height } .footer { background: red; height: 20px; }
理论上它应该工作，但是columns.margin不能像我所期望的那样工作。 我认为它应该使高度= 100％ – 马金，但它只是移动容器。
我google了一下，看到了StackOverflow的许多问题。 所有这些都包括JavaScript或位置：绝对和手动定位。 恕我直言，他们比解决scheme更黑客，我认为应该有一些更简单，更优雅和跨浏览器的方式来解决这个问题。
那么我怎么做上面的布局呢？ 也许Bootstrap可以帮助我（我已经看过文档，但没有提到这种情况）？
我在Stackoverflow上find了一个post，并实现了你的devise：
这是原来的post： https : //stackoverflow.com/a/5768262/1368423
那是你在找什么？
HTML：
<div class="container-fluid wrapper"> <div class="row-fluid columns content"> <div class="span2 article-tree"> navigation column </div> <div class="span10 content-area"> content column </div> </div> <div class="footer"> footer content </div> </div>
CSS：
html, body { height: 100%; } .container-fluid { margin: 0 auto; height: 100%; padding: 20px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .columns { background-color: #C9E6FF; height: 100%; } .content-area, .article-tree{ background: #bada55; overflow:auto; height: 100%; } .footer { background: red; height: 20px; }
我知道这一天晚了，但可能会帮助别人！
body,html { height: 100%; } .contentarea { /* * replace 160px with the sum of height of all other divs * inc padding, margins etc */ min-height: calc(100% - 160px); }
如果你使用Bootstrap 2.2.1，那么也许这是你在找什么。
示例文件index.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <link href="Content/Site.css" rel="stylesheet" /> </head> <body> <menu> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Application name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> <li><a href="/Home/About">About</a></li> <li><a href="/Home/Contact">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/Account/Register" id="registerLink">Register</a></li> <li><a href="/Account/Login" id="loginLink">Log in</a></li> </ul> </div> </div> </div> </menu> <nav> <div class="col-md-2"> <a href="#" class="btn btn-block btn-info">Some Menu</a> <a href="#" class="btn btn-block btn-info">Some Menu</a> <a href="#" class="btn btn-block btn-info">Some Menu</a> <a href="#" class="btn btn-block btn-info">Some Menu</a> </div> </nav> <content> <div class="col-md-10"> <h2>About.</h2> <h3>Your application description page.</h3> <p>Use this area to provide additional information.</p> <p>Use this area to provide additional information.</p> <p>Use this area to provide additional information.</p> <p>Use this area to provide additional information.</p> <p>Use this area to provide additional information.</p> <p>Use this area to provide additional information.</p> <hr /> </div> </content> <footer> <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container" style="font-size: .8em"> <p class="navbar-text"> © Some info </p> </div> </div> </footer> </body> </html>
这是你想要的？ 这是一个小提琴演示 。
布局是基于百分比，颜色是为了清晰。 如果内容列溢出，则会出现滚动条。
body, html, .container-fluid { height: 100%; } .navbar { width:100%; background:yellow; } .article-tree { height:100%; width: 25%; float:left; background: pink; } .content-area { overflow: auto; height: 100%; background:orange; } .footer { background: red; width:100%; height: 20px; }
