0

私は 3 つの主要な div を持ってheaderいmain-containerますfooter。divのCSSは

#main_container
{
    width:950px;
    margin:0 auto;

}
#header
{
    background:#f4f8f9;
}
#footer
{
    clear:both;
    background:#355e95;
    height:40px;
    color:#fff; 
    font-size:13px;
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
}

さて、インデックスページでは、左右のフローティングがなかったので、フッターは下にあります。しかし、後続のページでは、多くのフローティングがあり、フッターが上に表示されmain-containerます! なぜこれが起こるのですか？divのfloating前にクリアしましたfooter

<div class="clr"></div> 
    <div id="footer">
         &copy;2010 Sri Sai Group
         <div class="fbtm">
            Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
         </div>
    </div>

注意overflow:auto;：ページを追加すると、このようになります！ 編集されたcssページ

私のページの 1 つの完全な HTML:

<body>
    <div id="header">
        <div class="htop">
            <div class="phn">Ph +0361-26699811</div>

            <div class="email">Email support@7sisters.in</div>

        </div>


    </div>

    <div id="main_container">
        <div id="menu_wrapper">
            <div class="menu_outer">

                <div class="logo">
                    <img src="css/images/logo.png" alt="Sri sai" />
                </div>

                <div class="menu">
                    <div id="site_title">
                        <h1>SRI SAI GROUP</h1>
                    </div>

                    <div id='cssmenu'>
                        <ul>
                           <li><a href='#'><span>Home</span></a></li>
                           <li class='has-sub '><a href='#'><span>About</span></a>
                              <ul>
                                 <li class='has-sub '><a href='#'><span>Overview</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Board Members</span></a>

                                 </li>

                                 <li class='has-sub '><a href='#'><span>Our Family</span></a>

                                 </li>

                                 <li class='has-sub '><a href='#'><span>Gratitude</span></a>

                                 </li>
                              </ul>
                           </li>
                           <li class='has-sub '><a href='#'><span>Business</span></a>
                                <ul>
                                    <li class='has-sub '><a href='#'><span>Food and Beverages</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Media and Entertaintment</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Information Technology</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Consumer Servies</span></a>

                                 </li>
                                 </ul>   
                           </li>
                           <li><a href='#'><span>Contact</span></a></li>
                        </ul>
                     </div>
              </div>   
         </div>

         <div id="web-design">
      <img src="css/images/banner_ssg.png" />
    Our Website Development team builds websites using latest technologies; the sites we build are robust, secure and reliable. Our process guarantees fast capturing of your idea and quick Website Development at minimum possible cost.

During the Website Development process we keep provisions for future growth of your business. The sites we build are SEO compatible. You will get professional developers that are personally dedicated to you and ready to meet your business objectives.

All our projects come with the needed documentation and support.
    </div>
        <div id="contact_form">

        <form method="post" id="customForm" action="">
            <div>
                <label for="name">Name&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input id="name" name="name" type="text" />
                <span id="nameInfo"></span>
            </div>
            <div>
                <label for="email">Phone&nbsp;&nbsp;&nbsp;</label>
                <input id="phone" name="phone" type="text" />
                <span id="phoneInfo"></span>
            </div>
            <div>
                <label for="message">Address&nbsp;</label>
                <textarea id="message" name="message" cols="" rows=""></textarea>
            </div>
            <div>
                <label for="email">Email&nbsp;&nbsp;&nbsp;</label>
                <input id="email" name="email" type="text" />
                <span id="emailInfo"></span>
            </div>
            <div>
                <label for="pass2">Website&nbsp;</label>
                <select>
                    <option>Static</option>
                    <option>Dynamic</option>
                </select>    
                <span id="pass2Info"></span>
            </div>

            <div>
                <input id="send" name="send" type="submit" value="Send" />
            </div>
        </form>
        </div>


    </div>


    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/validation.js"></script>    


    </div>



    <div class="clr"></div> 
    <div id="footer">
         &copy;2010 Sri Sai Group
         <div class="fbtm">
            Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
         </div>
    </div>

    </body>
4

3 に答える 3

1

フッターの前に maincontent div を閉じる必要があるようです。そのための div がありません (既に持っていると思われる場合はそうではありません)。

            <div>
            <input id="send" name="send" type="submit" value="Send" />
        </div>
    </form>
    </div>
</div></div>



<div class="clr"></div> 
<div id="footer">
     &copy;2010 Sri Sai Group
     <div class="fbtm">
        Powered,Maintained and Designed By <a href="http://7sisters.in"
   target="_blank">7sisters.in</a>
     </div>

また、メインコンテンツの幅を % にして、一部のブラウザーで幅が広すぎないようにすることを検討してください。

#main_container
{
width:100%;
margin:0 auto;

}
于 2013-03-29T13:00:16.603 に答える
0

子要素のサイズに応じて高さが大きくなるように、cssoverflow:autoに追加する必要があります。#main_containerその後、すべてのコンテンツの#footer後#main_containerに意味します。

#main_container
{
    width:950px;
    margin:0 auto;
    overflow: auto; /* add this */
}
于 2013-03-29T12:28:42.697 に答える
0

この構造を入れます。

<body>
    <div id="header">
        <div class="htop">
            <div class="phn">Ph +0361-26699811</div>

            <div class="email">Email support@7sisters.in</div>

        </div>


    </div>

    <div id="main_container">
        <div id="menu_wrapper">
            <div class="menu_outer">

                <div class="logo">
                    <img src="css/images/logo.png" alt="Sri sai" />
                </div>

                <div class="menu">
                    <div id="site_title">
                        <h1>SRI SAI GROUP</h1>
                    </div>

                    <div id='cssmenu'>
                        <ul>
                           <li><a href='#'><span>Home</span></a></li>
                           <li class='has-sub '><a href='#'><span>About</span></a>
                              <ul>
                                 <li class='has-sub '><a href='#'><span>Overview</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Board Members</span></a>

                                 </li>

                                 <li class='has-sub '><a href='#'><span>Our Family</span></a>

                                 </li>

                                 <li class='has-sub '><a href='#'><span>Gratitude</span></a>

                                 </li>
                              </ul>
                           </li>
                           <li class='has-sub '><a href='#'><span>Business</span></a>
                                <ul>
                                    <li class='has-sub '><a href='#'><span>Food and Beverages</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Media and Entertaintment</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Information Technology</span></a>

                                 </li>
                                 <li class='has-sub '><a href='#'><span>Consumer Servies</span></a>

                                 </li>
                                 </ul>   
                           </li>
                           <li><a href='#'><span>Contact</span></a></li>
                        </ul>
                     </div>
              </div>   
         </div>

         <div id="web-design">
      <img src="css/images/banner_ssg.png" />
    Our Website Development team builds websites using latest technologies; the sites we build are robust, secure and reliable. Our process guarantees fast capturing of your idea and quick Website Development at minimum possible cost.

During the Website Development process we keep provisions for future growth of your business. The sites we build are SEO compatible. You will get professional developers that are personally dedicated to you and ready to meet your business objectives.

All our projects come with the needed documentation and support.
    </div>
        <div id="contact_form">

        <form method="post" id="customForm" action="">
            <div>
                <label for="name">Name&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input id="name" name="name" type="text" />
                <span id="nameInfo"></span>
            </div>
            <div>
                <label for="email">Phone&nbsp;&nbsp;&nbsp;</label>
                <input id="phone" name="phone" type="text" />
                <span id="phoneInfo"></span>
            </div>
            <div>
                <label for="message">Address&nbsp;</label>
                <textarea id="message" name="message" cols="" rows=""></textarea>
            </div>
            <div>
                <label for="email">Email&nbsp;&nbsp;&nbsp;</label>
                <input id="email" name="email" type="text" />
                <span id="emailInfo"></span>
            </div>
            <div>
                <label for="pass2">Website&nbsp;</label>
                <select>
                    <option>Static</option>
                    <option>Dynamic</option>
                </select>    
                <span id="pass2Info"></span>
            </div>

            <div>
                <input id="send" name="send" type="submit" value="Send" />
            </div>
        </form>
        </div>


    </div>


    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/validation.js"></script>    

    <div class="clr"></div> 
    </div>
    <div id="footer">
         &copy;2010 Sri Sai Group
         <div class="fbtm">
            Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
         </div>
    </div>

    </body>
于 2013-03-29T13:03:09.867 に答える