Question

可以看到问题here

我在文档中有几个div，使用CSS定位，但是，页脚和内容div根本没有定位，除了一些边距（由于其他div使用CSS定位））。

这是一个包含所有代码的jsfiddle。或者，我想您可以使用Firebug或Chrome开发人员工具。我似乎无法弄清楚为什么页脚没有像内容div那样在文档的正常流程中被按下，而是在它们后面。

我只是使用边距将页脚向下推开，但这很邋and，我将使用javascript切换来打开和关闭三个内容部分，显然我希望页脚在页面中的那些更改。

感谢大家的帮助。

HTML

    <div id="header">

    <div id="header_logo"><a href="index.php"><img src="images/vending_logo_alt.png" alt="" /></a></div>
    <div class="row">
        <ul>
            <div class="col-1-4"><a href="index.php">Home</a></div>
            <div class="col-1-4"><a href="products.php">Products</a></div>
            <div class="col-1-4"><a href="about.php">About</a></div>
            <div class="col-1-4"><a href="contact.php">Contact Us</a></div>
        </ul>
    </div>
    </div>

<div id="heading_pad"></div>

<div id="home_image"></div>

        <div id="lower_nav">
    <div class="row">
        <div id="combination" class="col-1-4"><a href="#">Combination</a></div>
        <div id="food" class="col-1-4"><a href="#">Food</a></div>
        <div id="snack" class="col-1-4"><a href="#">Snack</a></div>
        <div id="drink" class="col-1-4"><a href="#">Drink</a></div>
    </div>  
</div>

    <div id="content">



    </div><!-- #content -->

<div id="footer" class="row">

        <div id="footer_one" class="col-1-4">
            <div id="footer_sitemap_image"><img src="images/vending_connect_icon_alt.png" alt="" /></div>
            <div id="footer_sitemap">
                <a href="">Home</a> | <a href="">Products</a> | <a href="">About</a><br>
                <a href="">Contact Us</a> | <a href="">Combination</a><br>
                <a href="">Food</a> | <a href="">Drink</a> | <a href="">Snack</a>
            </div>
        </div><!-- #footer_one -->

        <div id="footer_two" class="col-1-2">
            <div id="footer_contact_image"><img src="images/vending_mail_icon_alt.png" alt="" /></div>
            <div id="footer_contact">
                1234 Gateway Drive<br>
                Cottontown, TN 37048<br>
                (615)xxx-xxxx | (615)xxx-xxxx<br>
                <a href="#">contact@versatilesupport.com</a>
            </div>
        </div><!-- #footer_two -->

        <div id="footer_three" class="col-1-4">
            <div id="footer_social_image"><img src="images/vending_chat_icon_alt.png" alt="" /></div>
            <div id="footer_social">
                Connect with us on <span style="font-weight:600;"><a href="#">Facebook</a></span><br>
                Follow us on <span style="font-weight:600;"><a href="#">Twitter</a></span><br>
                Link to us on <span style="font-weight:600;"><a href="#">LinkedIn</a></span>
            </div>
        </div><!-- #footer_three -->

        <div id="all_rights">&copy; 2014 Vending Company. All rights reserved. Website by Ian Stanford.</div>

</div><!-- #footer -->

Answer 1

问题在于：

#content {
    height:1px;
}

#content的内容溢出1px高度。删除它，内容将正常流动。

DIV重叠，没有使用CSS定位

1 个答案: