css - 页脚菜单位于主容器顶部

Question

我有三个主要的 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！为什么会发生这种情况？我已经在divfloating之前清除了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 页面

我的页面之一的完整 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>

score 1 · Accepted Answer

看起来你需要做的是在页脚之前关闭你的 maincontent 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>

另外，也许可以考虑将 maincontent 宽度设为 % 以阻止它在某些浏览器上扩展得太远。

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

}

score 0 · Accepted Answer

您应该添加overflow:auto到您的#main_containercss 中，以便它根据其子元素的大小增加高度。然后#footer将直接在#main_container这意味着所有内容之后。

#main_container
{
    width:950px;
    margin:0 auto;
    overflow: auto; /* add this */
}

score 0 · Accepted Answer

把这个结构。

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

css - 页脚菜单位于主容器顶部

3 回答 3

Related

Reference