2

初学者在这里。目前使用 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 引导 css 文件和响应 css 文件。

4

2 回答 2

4

试试这个

.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>
于 2014-11-26T06:32:26.127 回答
0

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

默认情况下，固定行为不会在 < 980px 的视口上激活

祝你好运！

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

于 2013-05-02T12:02:12.957 回答