HTML&CSS + Twitter Bootstrap:全页面布局或高度100% - Npx
HTML&CSS + Twitter Bootstrap:全页面布局或高度100% - Npx
提问于 2013-01-06 12:05:43
我试着做以下布局：
+-------------------------------------------------+
| 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并不像我预期的那样工作。我认为它应该使height = 100% - magin，但它只是移动容器。
我用谷歌搜索了一下，在StackOverflow上看到了很多问题。它们都包括JavaScript或position:绝对定位和手动定位。与其说他们是一个解决方案，不如说他们是黑客，我认为应该有一些更简单、更优雅和跨浏览器的方法来解决这个问题。
那么，如何进行上述布局呢？也许Bootstrap可以帮助我(我已经查阅了文档，但没有提到这样的案例)？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-01-06 14:15:26
我在Stackoverflow上找到了一篇文章，并实现了你的设计：
这里是原始帖子：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;
}Stack Overflow用户
发布于 2014-06-18 05:48:50
我知道现在已经很晚了，但也许能帮到别人！
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);
}Stack Overflow用户
发布于 2014-09-27 21:55:09
如果你使用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>文件内容/Site.css
body {
padding-bottom: 70px;
padding-top: 70px;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14179166
复制相关文章
相似问题