Html 粘贴页脚的css未出现在正确的位置

我想创建粘性页脚，下面是我正在使用的css代码，但页脚并没有出现在正确的位置，要么出现在页面的左侧，要么与其他div元素重叠，错误在哪里

html代码

    <div id="wrap">
        <div id="header">
            <div id="logo"></div>
            <div id="nav"></div>
        </div>
        <div id="mid">
            <div id="clogin"></div>
            <div id="roll"></div>
        </div>
        <div id="main">
            <div id="advt"></div>
            <div id="content"></div>
            <div id="right"></div>
        </div>
<div id="footer"></div>
    </div>

---

用于粘贴页脚的此代码

Css

html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%; background:red;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em; 
}

.footer{
    background:green;}

HTML

<div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
</div>
<div class="footer">
    <p>Copyright (c) 2008</p>
</div>

你的网站内容在这里

版权所有（c）2008

---

将页脚粘贴在底部，并与应使用的其他元素重叠

#footer{               
    position: fixed; // To stay fixed
    bottom:0;
    left: 0; // To stick to the left
    z-index: 99; // For overlapping elements
    width:inherit;
    height:30px;   /* Height of the footer */
    background:red;
}

---

我并没有得到正确的布局使用此代码，甚至页脚并没有在页面底部是的，它的工作，谢谢仍然重叠显示我一个完整的小提琴，我会指导你们。在我的小提琴中，琴脚粘在底部，没有重叠。我在这里展示了代码

#footer{               
    position: fixed; // To stay fixed
    bottom:0;
    left: 0; // To stick to the left
    z-index: 99; // For overlapping elements
    width:inherit;
    height:30px;   /* Height of the footer */
    background:red;
}