页脚未清除

-3

请有人帮忙，为什么我的页脚没有正确显示在底部。我申请清楚：两者;但注意到。页脚未清除

http://www.vellosdesigns.com/newsite/build-2/

请你能帮忙吗？

感谢你所有的问题现在已经修复。

2013-04-10 jelly46

[我的网站上不起作用的东西这样做。我可以只粘贴一个链接吗？]（http://meta.stackexchange.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link对它） – Pigueiras 2013-04-10 22:06:20

无论如何，你的问题是'＃smallpics'的固定大小。它内部的图像传递该div。 – Pigueiras 2013-04-10 22:09:02

我做错了什么？为什么投票下来，对不起，如果我冒犯了。 – jelly46 2013-04-10 22:09:39

如果你想使用clear：both;页脚需要有一个浮动元素的父项。这不是你的情况。

要做到这一点，最好的办法是使用clearfix

http://nicolasgallagher.com/micro-clearfix-hack/

复制的代码粘贴到你的CSS。然后，只需添加一个类CF到您的div

它将看起来像

<div class="cf"> 
    <div id="smallpics" class="...">...</div> 
    <div id="smallpics" class="...">...</div> 
    <div id="smallpics" class="...">...</div> 
</div>

希望这有助于！

来源

2013-04-10 22:08:59 jhon

感谢队友，但我不明白你的答案的部分，对不起 – jelly46 2013-04-10 22:21:10

你不明白？ – jhon 2013-04-10 22:25:01

页脚需要有一个浮动元素的父项 – jelly46 2013-04-10 22:34:42

随着我的帮助与页脚

<!DOCTYPE html> 
<html> 
<head> 
<base href="http://www.vellosdesigns.com/newsite/build-2/" /> 
<style> 
    html, body {height: 100%;margin: 0;background:#000;} 
    h1{color:#787979;} 
    #wrapper {min-height:100%;margin: 0 auto -75px;} 
    #header {min-width:100%;height:150px;float:left} 
    #headerContent {width:1112px;margin:0 auto;} 
    #separator, #footer {height:180px;} 
    #content {margin:0 auto;width:1112px;padding:15px;} 
    #footer {min-width:100%;float:left;color:#fff;background-color:#7f7f7f} 
    #footerContent {margin: 0 auto;width:1112px;padding:10px 0px;} 
    .address {color:#787979; text-align:right; font-size:12px; float:right; line-height:190%;} 
    #gallery {background:#FFF; height:450px;} 
    #navcontainer {float:right; margin-top:15px;} 
    #navlist li { display: inline; list-style-type: none; } 
    #navlist li a:link {text-decoration:none; color:#787979; font-size:12px; margin-left:25px;} 
    .smallpics {width:545px; height:180px; float:left; margin-top:40px;} 
    .s-pic-b,.s-pic-d {margin-left:20px;} 
    .s-pic-c,.s-pic-d {padding-top:50px;} 
    div.fadehover {position: relative; } 
    img.a {position: absolute; left: 0;top: 0; z-index: 10; } 
    img.b {position: absolute; left: 0;top: 0; } 
</style> 
<script type='text/javascript' src='jquery-1.9.1.js'></script> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $("img.a").hover(
      function() { 
       $(this).stop().animate({"opacity": "0"}, "slow"); 
      }, 
     function() { 
      $(this).stop().animate({"opacity": "1"}, "slow"); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header"> 
     <div id="headerContent"> 
      <p><span class="address">Whetstone - 020-8888-8888 <br />Kensington - 020-8888-8888</span></p> 
      <img src="logo.png" /> 
      <div id="navcontainer"> 
       <ul id="navlist"> 
       <li><a href="#">Bespoke</a></li> 
       <li><a href="#">Contemporary</a></li> 
       <li><a href="#">Achitecture &amp; Interiors</a></li> 
       <li><a href="#">Management &amp; Build</a></li> 
       <li><a href="#">Contact Us</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
    <div id="content"> 
      <div id="gallery"></div> 
      <div class="smallpics s-pic-a"> 
       <h1>Bespoke</h1> 
       <div class="fadehover"> 
        <a href=""><img src="a-bw.png" alt="" class="a" /><img src="a-color.png" alt="" class="b" /></a> 
       </div> 
      </div> 
      <div class="smallpics s-pic-b"> 
       <h1>Contemporary</h1> 
       <div class="fadehover"> 
        <a href=""><img src="b-bw.png" alt="" class="a" /><img src="b-color.png" alt="" class="b" /></a> 
       </div> 
      </div> 
      <div class="smallpics s-pic-c"> 
       <h1>Achitecture &amp; Interiors</h1> 
       <div class="fadehover"> 
        <a href=""><img src="c-bw.png" alt="" class="a" /><img src="c-color.png" alt="" class="b" /></a> 
       </div> 
      </div> 
      <div class="smallpics s-pic-d"> 
       <h1>Management &amp; Build </h1> 
       <div class="fadehover"> 
        <a href=""><img src="d-bw.png" alt="" class="a" /><img src="d-color.png" alt="" class="b" /></a> 
       </div> 
      </div> 
      <div style="clear:both;"></div> 
    </div> 
    <div id="separator"></div> 
    </div> 
    <div id="footer"> 
     <div id="footerContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
    </div> 
</body> 
</html>

来源

2013-05-14 16:17:53 jelly46

回顾这个问题，这是一个很坏的问题，接近自私。我试图删除它，道歉SO。 – jelly46 2013-08-27 15:09:41

回答

相关问题