Question

初学者在这里。目前使用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>



Here is my CSS.

.navbar-fixed-bottom {
clear:  both;
background-color: #e1e1e1;
padding: 20px;
 }

#footer {

font-size: 16px;

 }

#socialFooter {
float:  right;
 }

使用twitter bootstrap css文件和响应式css文件。

Answer 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>

Answer 2

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

默认情况下，未在视口上激活固定行为＆lt; 980px

祝你好运！

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

内容被隐藏在页脚和导航栏下的Twitter引导问题

2 个答案: