Twitter引导问题，内容隐藏在页脚和导航栏下答案

【问题标题】：Twitter bootstrap problems with content being hidden under footer and navbarTwitter引导问题，内容隐藏在页脚和导航栏下
【发布时间】：2014-11-26 14:32:26
【问题描述】：

这里是初学者。目前使用 twitter bootstrap，以及我自己的 html、css 和 js。但是，在某些页面上，当内容远远超过实际页面时，它似乎隐藏在页脚或顶部导航栏下方。我包含了网站的一部分，我尝试过使用边距或填充，但是当我在使用响应模式时减小窗口大小时，它确实会成为一个问题。

任何帮助将非常感谢。

<!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 &#169; 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>

这是我的 CSS。

.navbar-fixed-bottom {
明确：两者；
背景颜色：#e1e1e1；
填充：20px；
 }

#页脚{

字体大小：16px；

 }

#socialFooter {
浮动：对；
 }

并使用 twitter 引导 css 文件和响应 css 文件。

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

试试这个

.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>&copy; Company</p>
           </div>
        </div>
 </div>

【讨论】：

【解决方案2】：

如果this is what your page looks like，那么您描述的内容在顶部导航栏和页脚下滑动的行为是 Bootstrap 的有意功能。如果这不是您想要的，则从这两个 div 中删除 navbar-fixed-top 和 navbar-fixed-bottom。

默认情况下，固定行为不会在

祝你好运！

http://jsfiddle.net/panchroma/z5hmK/

【讨论】：

谢谢，这就是问题所在。我不认为它会隐藏内容，但我更了解该功能。
我实际上注意到它可以工作，但是如果没有足够的内容将其向下推，我的页脚向上移动的问题仍然存在，这就是我最初使用固定类的原因。我需要添加填充来解决这个问题还是有其他更有效的方法？
@Leo 听起来你想要的是粘性页脚twitter.github.io/bootstrap/examples/sticky-footer.html 我明白你为什么认为固定底层可能会这样做，但它们并不完全相同。希望这会有所帮助
太好了，现在你走了！