1
我想通过使用引导CSS来设计页面布局。我已经失去了四天，但我做不到完美。我遇到了下面两个问题：设计引导3页面布局动态保持高度，滚动，宽度
- 如何使Bootstrap列的高度一致？
- 由于顶部导航栏不固定，滚动条位于下方。
我下面的问题的图像：
我用下面的代码.........
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="[email protected]*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<section class="main">
<div class="container-fluid">
<div class="row row-one">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris
tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit condimentum nisl interdum sed iaculis mi consectetur. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate consectetur urna, a dignissim odio vestibulum a.</p>
</div>
</div>
<div class="row row-two">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris
tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit condimentum nisl interdum sed iaculis mi consectetur. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate consectetur urna, a dignissim odio vestibulum a.</p>
</div>
</div>
</div>
</section>
<footer class="navbar navbar-inverse navbar-fixed-bottom">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span></a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-calendar"></span></a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-comment"></span></a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span></a>
</li>
</ul>
</footer>
</body>
</html>
CSS：
html, body {
height: 100%;
overflow: hidden;
}
body {
padding: 0px 0;
}
.navbar {
margin-bottom: 0px;
}
.main {
height: 100%;
overflow-y: scroll;
padding: 0px 0;
}
footer .navbar-inverse {
background: #5f5f5f;
}
/*Prevent the Footer from Collapsing*/
footer .navbar-nav {
float: left;
margin: 0;
}
footer .navbar-nav > li {
float: left;
}
footer .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
/*END: Prevent the Navbar from Collapsing*/
.row-one {
/*do not use display: table-row;*/
}
.row-two {
/*do not use display: table-row;*/
}
.row-one > .col-xs-12 {
background-color: gray;
}
.row-two > .col-xs-12 {
background-color: bisque;
}
.row {
overflow: hidden;
}
[class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
预防措施：
- 避免显示：表，表列，和表格单元。
- 避免JavaScript代码。
我不确定这些规则是否可行。 – Legin76 2014-10-20 13:26:06
不是。甚至Bootstrap自己的文档也增加了CSS。 – Christina 2014-10-20 19:39:54
@Christina，避免显示：表格，表格行和表格单元格。并避免JavaScript代码。 – Shohel 2014-10-21 03:11:10