2

ここ初心者。現在、自分の html、css、および js とともに、twitter ブートストラップを使用しています。ただし、コンテンツが実際のページよりもはるかに多い一部のページでは、フッターまたは上部のナビゲーション バーの下に隠されているように見えます。サイトの一部を含めて、マージンやパディングをいじってみましたが、レスポンシブモードでウィンドウサイズを小さくすると問題が発生します。

どんな助けでも大歓迎です。

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