頁腳未清除

-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

回答

相關問題