的DIV重叠，用在他们没有CSS定位

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

以下是带有所有代码的jsfiddle。或者，我想你可以使用Firebug或Chrome开发者工具。我似乎无法弄清楚为什么页脚不会像内容div一样处于文档的正常流动中，而是坐在它们后面。

我只是使用页边距将页脚向下推开，但这很sl，，我将使用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="#">[email protected]</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 -->

来源

2014-04-23 realianstanford

DIV不能是UL的孩子。您的HTML无效。 –

这在验证器中没有出现。该页面正确显示内容，无论是div还是列表项。我知道把div作为一个无序列表的孩子是没有意义的，我已经修正了它，但说它无效是愚蠢的。 – realianstanford

问题就在这里：

#content { 
    height:1px; 
}

您#content的内容溢出1px高度。删除此内容将正确流动。

来源

2014-04-23 16:55:14

谢谢。第二组眼睛总是有用的。我不记得这么做，或者我正在努力完成的。 – realianstanford

的DIV重叠，用在他们没有CSS定位

回答

相关问题