Css 包含多个div的粘性页脚无效_Css_Html_Footer_Sticky

Css 包含多个div的粘性页脚无效

css html

Css 包含多个div的粘性页脚无效,css,html,footer,sticky,Css,Html,Footer,Sticky,我真的在为我的页脚挣扎。我已按照上的说明将页脚粘到页面底部。在我将div添加到页脚div之前，它工作正常-紫色背景和图像消失。我会把它作为一个单独的div来做，但是如果不创建一个单独的框，我就无法解决如何做锯齿形边任何帮助都将不胜感激！我已经试了好几天来让它工作。这是我的HTML： <body> <div id="wrapper">  <div id="header"&

我真的在为我的页脚挣扎。我已按照上的说明将页脚粘到页面底部。在我将div添加到页脚div之前，它工作正常-紫色背景和图像消失。我会把它作为一个单独的div来做，但是如果不创建一个单独的框，我就无法解决如何做锯齿形边

任何帮助都将不胜感激！我已经试了好几天来让它工作。这是我的HTML：

    <body>
    <div id="wrapper">


     <!-- Begin Header -->
     <div id="header">

    <a href="index.html"><img src="images/logo.png" width="435px" height="112px" alt="Lauren Womack Logo" /></a>

    <div id="menu">
    <a href="/"><img src="images/menu/home.png" width="142" height="160" alt="Home"  /></a> 
    <a href="about.html"><img src="images/menu/about.png" width="131" height="157" alt="About"  /></a>
    <a href="contact.html"><img src="images/menu/contact.png" width="128" height="160" alt="Contact"  /></a>     
    </div>             
    </div>
     <!-- End Header -->
     <!-- Begin Content -->
     <div id="content">
    <div id="rightholder">
    <div class="outerleft">
    <div class="inner"><h2>Animation and Interactive</h2>
    </div> 
    </div>
    <div class="outerright">
    <div class="inner">
    <h2>Web Design</h2>
    </div>       
    </div>
    <div class="outerleft">
    <div class="inner">
    <h2>Print Design</h2>
</div></div>

    <div class="outerright">
    <div class="inner">
    <h2>Illustration</h2>
</div>   
       </div></div>          <!-- End Content -->
    </div>
    </div><!-- Begin Footer -->   
    <div id="footer">
    <div class="footeredge">  </div>
    <div class="footerinner">     <p>© Lauren Womack 2012</p>
    </div>        </div>   </div>
            <!-- End Footer --></body></html>

我希望它看起来如何：底部的紫色框和Z字形没有显示，只是显示文本。

页脚没有结束的大括号，这反过来会在这一点之后打断您的样式声明。

您能提供一个到JSFIDLE的链接，或者链接到它所在的环境吗？刚刚上传了。谢谢你的回复，很有效！非常感谢你！我很高兴事情也这么简单。不用担心，很高兴我能帮上忙。：）

    body {font-size: 13px; background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%;}
    html {height: 100%;}
    #wrapper{ min-height:100%; min-width:992px; margin-left:0px; margin-right:0px;}
    #header {height: 170px; padding-top:36px; border: none;}
    #menu {float:right;}
    #content { position: relative; min-width: 1141px; border:none;background: none; overflow:auto; padding-right:32px; padding-left:32px; padding-bottom: 86px;}
    #rightholder { float: right; clear: left;min-width: 639px;width: 60%;padding-top: 90px;}
    .outerright {background-image:url(images/threadborder.jpg);min-width: 257px;width: 45%; height: 98px; margin-top: 22px; margin-bottom: 22px; margin-left: 20px;float: right;clear: right;}
    .outerleft {background-image:url(images/threadborder.jpg);
min-width: 257px; width: 45%; height: 98px; margin-top: 22px;margin-bottom: 22px;margin-right: 20px; float: left;clear: left;}
    .inner {padding: 5px; height: 87px;}
    #footer {position: relative; margin-top:-86px; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; height:86px; clear:both; padding-right: 32px; margin-left:0px; margin-right:0px; border: none;
    /*Opera Fix*/
    body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
    }
    .footeredge {
background-color: none;
background-image:url(images/footer/zigzag.png);
    background-repeat:repeat-x;
    height: 20px;
    }
    .footerinner {
background-color:#663366;
height: 66px;
    }