Question

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

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

请帮忙吗？

感谢您，所有问题现已修复。

Answer 1

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

最好的方法是使用clearfix

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

将代码复制粘贴到CSS中。然后只需在您的div中添加一个cf类

看起来像

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

希望这有帮助！

Answer 2

在帮助下我用页脚

做了这个

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

页脚不清除

2 个答案: