Twitter bootstrap Twitter引导问题，内容隐藏在页脚和导航栏下
我是初学者。目前正在使用twitter引导，以及我自己的html、css和js。然而，在某些页面上，当内容比实际页面多得多时，它似乎隐藏在页脚或顶部导航栏下面。我包括了网站的一部分，我尝试过在边距或填充物上乱搞，但当我使用响应模式时，缩小窗口大小确实会成为一个问题 任何帮助都很好，谢谢Twitter bootstrap Twitter引导问题，内容隐藏在页脚和导航栏下,twitter-bootstrap,Twitter Bootstrap,我是初学者。目前正在使用twitter引导，以及我自己的html、css和js。然而，在某些页面上，当内容比实际页面多得多时，它似乎隐藏在页脚或顶部导航栏下面。我包括了网站的一部分，我尝试过在边距或填充物上乱搞，但当我使用响应模式时，缩小窗口大小确实会成为一个问题 任何帮助都很好，谢谢 <!DOCTYPE html> <html lang="en"> <head> <title>Weblio</title> <m
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weblio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/js/script.js"></script>
</head>
<body>
<!--navbar here-->
<div class="navbar">
<div class="navbar-inner navbar-fixed-top">
<a class="brand" href="/" ><i class="icon-phone-sign icon-2x"></i></a>
<ul class="nav">
<!--<li class="active"><a href="/">Home</a></li> -->
<li>
<form id="login" class="form-inline" method="post">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn btn-inverse signIn">Log in</button>
</form>
</li>
</ul>
</div>
</div>
<!--content-->
<div class="centerContent">
<div id="header">
<h1>This is the FAQ page.</h1>
</div>
<div class="faqheader">
<h3>Question 1?</h3>
Nunc iaculis leo nec orci iaculis interdum eu at magna. Sed condimentum condimentum rutrum. Proin felis libero, volutpat vel congue ultricies, ultricies id risus. Phasellus scelerisque mi eu velit imperdiet vel interdum arcu rhoncus. Nunc sagittis sagittis lectus et faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas placerat feugiat neque eu interdum. Etiam massa ligula, faucibus at molestie sit amet, lobortis non nunc. Sed volutpat aliquam lorem sit amet tincidunt.
</div>
<div class="faqheader">
<h3>Question 2?</h3>
Nunc iaculis leo nec orci iaculis interdum eu at magna. Sed condimentum condimentum rutrum. Proin felis libero, volutpat vel congue ultricies, ultricies id risus. Phasellus scelerisque mi eu velit imperdiet vel interdum arcu rhoncus. Nunc sagittis sagittis lectus et faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas placerat feugiat neque eu interdum. Etiam massa ligula, faucibus at molestie sit amet, lobortis non nunc. Sed volutpat aliquam lorem sit amet tincidunt.
</div>
<div class="faqheader">
<h3>Question 3?</h3>
Nunc iaculis leo nec orci iaculis interdum eu at magna. Sed condimentum condimentum rutrum. Proin felis libero, volutpat vel congue ultricies, ultricies id risus. Phasellus scelerisque mi eu velit imperdiet vel interdum arcu rhoncus. Nunc sagittis sagittis lectus et faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas placerat feugiat neque eu interdum. Etiam massa ligula, faucibus at molestie sit amet, lobortis non nunc. Sed volutpat aliquam lorem sit amet tincidunt.
</div>
<div class="faqheader">
<h3>Question 4?</h3>
Nunc iaculis leo nec orci iaculis interdum eu at magna. Sed condimentum condimentum rutrum. Proin felis libero, volutpat vel congue ultricies, ultricies id risus. Phasellus scelerisque mi eu velit imperdiet vel interdum arcu rhoncus. Nunc sagittis sagittis lectus et faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas placerat feugiat neque eu interdum. Etiam massa ligula, faucibus at molestie sit amet, lobortis non nunc. Sed volutpat aliquam lorem sit amet tincidunt.
</div>
<div class="faqheader">
<h3>Question 5?</h3>
Nunc iaculis leo nec orci iaculis interdum eu at magna. Sed condimentum condimentum rutrum. Proin felis libero, volutpat vel congue ultricies, ultricies id risus. Phasellus scelerisque mi eu velit imperdiet vel interdum arcu rhoncus. Nunc sagittis sagittis lectus et faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas placerat feugiat neque eu interdum. Etiam massa ligula, faucibus at molestie sit amet, lobortis non nunc. Sed volutpat aliquam lorem sit amet tincidunt.
</div>
<div class="faqheader">
<h3>Question 6?</h3>
Nunc iaculis leo nec orci iaculis interdum eu at magna. Sed condimentum condimentum rutrum. Proin felis libero, volutpat vel congue ultricies, ultricies id risus. Phasellus scelerisque mi eu velit imperdiet vel interdum arcu rhoncus. Nunc sagittis sagittis lectus et faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas placerat feugiat neque eu interdum. Etiam massa ligula, faucibus at molestie sit amet, lobortis non nunc. Sed volutpat aliquam lorem sit amet tincidunt.
</div>
<div class="faqheader">
<h3>Question 7?</h3>
Nunc iaculis leo nec orci iaculis interdum eu at magna. Sed condimentum condimentum rutrum. Proin felis libero, volutpat vel congue ultricies, ultricies id risus. Phasellus scelerisque mi eu velit imperdiet vel interdum arcu rhoncus. Nunc sagittis sagittis lectus et faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas placerat feugiat neque eu interdum. Etiam massa ligula, faucibus at molestie sit amet, lobortis non nunc. Sed volutpat aliquam lorem sit amet tincidunt.
</div>
<div class="faqheader">
<h3>Question 8?</h3>
Nunc iaculis leo nec orci iaculis interdum eu at magna. Sed condimentum condimentum rutrum. Proin felis libero, volutpat vel congue ultricies, ultricies id risus. Phasellus scelerisque mi eu velit imperdiet vel interdum arcu rhoncus. Nunc sagittis sagittis lectus et faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas placerat feugiat neque eu interdum. Etiam massa ligula, faucibus at molestie sit amet, lobortis non nunc. Sed volutpat aliquam lorem sit amet tincidunt.
</div>
</div>
<!--footer-->
<div class="navbar navbar-fixed-bottom">
<div id="footer"> Weblio © 2013 | <a href="/about.html">About</a> |<a href="/faq.html">FAQ</a> | <a href="/privacy.html">Privacy Policy</a> | <a href="/terms.html">Terms of Use</a> | <a href="/contactUs.html">Contact Us</a>
<div id="socialFooter">
<a href="http://www.facebook.com/" target="_blank" title="Like us on Facebook."><i class="icon-facebook-sign icon-3x"></i></a>
<a href="http://www.twitter.com/" target="_blank" title="Follow us on twitter."><i class="icon-twitter-sign icon-3x"></i></a>
</div>
</div>
</div>
</body>
</html>
韦布里奥
-
记得我吗
登录
这是常见问题页面。
问题1？
马格纳大学的努克·亚库利斯·利奥·内克·奥奇·亚库利斯·因特杜姆·尤因。Sed调味品芸香调味品。自由猫，乌龟，乌龟。在拱门之间的空隙中，有一块圆石。矢状突、矢状突、矢状突、矢状突、矢状突。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。欧洲内部的封建制度。Etiam massa ligula，molestie sit amet的faucibus，lobortis non nunc。他坐在阿梅特·廷西登旁边。
问题2？
马格纳大学的努克·亚库利斯·利奥·内克·奥奇·亚库利斯·因特杜姆·尤因。Sed调味品芸香调味品。自由猫，乌龟，乌龟。在拱门之间的空隙中，有一块圆石。矢状突、矢状突、矢状突、矢状突、矢状突。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。欧洲内部的封建制度。Etiam massa ligula，molestie sit amet的faucibus，lobortis non nunc。他坐在阿梅特·廷西登旁边。
问题3？
马格纳大学的努克·亚库利斯·利奥·内克·奥奇·亚库利斯·因特杜姆·尤因。Sed调味品芸香调味品。自由猫，乌龟，乌龟。在拱门之间的空隙中，有一块圆石。矢状突、矢状突、矢状突、矢状突、矢状突。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。欧洲内部的封建制度。Etiam massa ligula，molestie sit amet的faucibus，lobortis non nunc。他坐在阿梅特·廷西登旁边。
问题4？
马格纳大学的努克·亚库利斯·利奥·内克·奥奇·亚库利斯·因特杜姆·尤因。Sed调味品芸香调味品。自由猫，乌龟，乌龟。在拱门之间的空隙中，有一块圆石。矢状突、矢状突、矢状突、矢状突、矢状突。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。欧洲内部的封建制度。Etiam massa ligula，molestie sit amet的faucibus，lobortis non nunc。他坐在阿梅特·廷西登旁边。
问题5？
马格纳大学的努克·亚库利斯·利奥·内克·奥奇·亚库利斯·因特杜姆·尤因。Sed调味品芸香调味品。自由猫，乌龟，乌龟。在拱门之间的空隙中，有一块圆石。矢状突、矢状突、矢状突、矢状突、矢状突。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。欧洲内部的封建制度。Etiam massa ligula，molestie sit amet的faucibus，lobortis non nunc。他坐在阿梅特·廷西登旁边。
问题6？
马格纳大学的努克·亚库利斯·利奥·内克·奥奇·亚库利斯·因特杜姆·尤因。Sed调味品芸香调味品。自由猫，乌龟，乌龟。在拱门之间的空隙中，有一块圆石。矢状突、矢状突、矢状突、矢状突、矢状突。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。欧洲内部的封建制度。Etiam massa ligula，molestie sit amet的faucibus，lobortis non nunc。他坐在阿梅特·廷西登旁边。
问题7？
马格纳大学的努克·亚库利斯·利奥·内克·奥奇·亚库利斯·因特杜姆·尤因。Sed调味品芸香调味品。自由猫，乌龟，乌龟。在拱门之间的空隙中，有一块圆石。矢状突、矢状突、矢状突、矢状突、矢状突。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。欧洲内部的封建制度。Etiam massa ligula，molestie sit amet的faucibus，lobortis non nunc。他坐在阿梅特·廷西登旁边。
问题8？
马格纳大学的努克·亚库利斯·利奥·内克·奥奇·亚库利斯·因特杜姆·尤因。Sed调味品芸香调味品。自由猫，乌龟，乌龟。在拱门之间的空隙中，有一块圆石。矢状突、矢状突、矢状突、矢状突、矢状突。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。欧洲内部的封建制度。Etiam massa ligula，molestie sit amet的faucibus，lobortis non nunc。他坐在阿梅特·廷西登旁边。
韦布里奥©；2013 | | | | |
这是我的CSS
.navbar-fixed-bottom {
clear: both;
background-color: #e1e1e1;
padding: 20px;
}
#footer {
font-size: 16px;
}
#socialFooter {
float: right;
}
.container-if-fixed-header
{
margin-top:50px;
}
.container-if-fixed-footer
{
margin-bottom:55px;
}
<div class="navbar navbar-fixed-top">
<div class="container">
<!--HEADER content here-->
</div>
</div>
<div class="container container-if-fixed-header container-if-fixed-footer">
<!--BODY content here-->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<!--FOOTER content here--> <p>© Company</p>
</div>
</div>
</div>