侧边栏背景流到底部

Question

我遇到了一个问题，出于某些原因，在IE页面底部的背景中，背景没有扩展。这看起来在Firefox中运行良好，但不适用于IE。如下图所示。

CSS：

#SecondaryContent
{
background: url(../images/background_slice.png) repeat-y 0% 0%;
width: 18%;
overflow: hidden;
float: left;
}

#Container
{
overflow:hidden; 
min-height:100%; 
height:auto!IMPORTANT; 
height:100%; /* Old browsers */

 /* IE9 SVG, needs conditional override of 'filter' to 'none' Doesn't seem to work!
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZmRmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iI2IzZTllZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); */
background: -moz-linear-gradient(left,  #edfdff 0%, #b3e9ef 18%, #ffffff 18%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#edfdff), color-stop(18%,#b3e9ef), color-stop(18%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* IE10+ */
background: linear-gradient(left,  #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%);      /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edfdff', endColorstr='#ffffff',GradientType=1 );*/ /* IE6-8 */

}

Answer 1

我已经通过使用这个Javascript调整div的高度以适应主div来解决这个问题。

<script type="text/javascript">
     var theHeight = $("#PrimaryContent").height() + 100;
     $('#SecondaryContent').height(theHeight);
</script>