当编辑器自动调整时，无法将我的页脚粘到底部

Question

我左侧有一个垂直导航栏，其位置设置为固定，页脚包含在每页的末尾。

当我的所见即所得编辑器（TinyMCE）自动调整页脚挂起时。

图片：

我该如何避免这种情况？

代码：

/* page.php */

<?php require(ABSPATH . 'header.php'); ?>

some content ...

<?php require(ABSPATH . 'footer.php'); ?>

/* header.php */

<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />

<div id="header">
</div>

<?php require(ABSPATH . 'menu.php'); ?>

<div id="content-wrapper">

/* menu.php */

<div id="left-menu">
    <ul>
        <li class="menu-title">
            <a href="#">Title</a>
        </li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</div>

/* footer.php */

</div><!-- close content wrapper -->

<div id="footer">
***FOOTER***
</div> 

CSS：

/* menu */

#left-menu {
    position: fixed;
    float: left;
    width: 180px;
    background: #000;
    height: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}

/* menu style */

#left-menu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#left-menu li {
    text-indent: 15px;
    line-height: 40px;
}

#left-menu li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

#left-menu li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

/* menu title style */ 

#left-menu ul .menu-title {
    line-height: 45px;
}

#left-menu ul .menu-title { 
    height: 50px;
    font-size: 18px;
}

#left-menu ul .menu-title {
    color: #999999;
}

#left-menu ul .menu-title a:hover {
    color: #fff;
    background: none;
}

/* content | header | footer */

#content-wrapper {
    margin-left: 200px;
    padding-top: 12px;
}

#header {

}

#footer {
    position: absolute;
    bottom: 0;
    right:0;
    padding-right: 20px;
    padding-bottom: 10px;
}