div在另一个div后面扩展

Question

（上一个问题修复了更新为新问题的问题） mainContent div现在扩展到它与页脚之间的传送带div的后面。

CSS样式1：

body { 
    height:100%; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    color: #000305; 
    line-height: 1.429; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
} 
.mainContent { 
    height:100%; 
    flex: 1; 
    position: relative; 
    background-color: #333; 
    overflow: hidden; 
    line-height: 25px; 
} 
.mainFooter { 
    position: relative; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: 150px; 
    width: 100%; 
    float: left; 
    padding-left: 0; 
    background-color: #000; 
    color: #CCC; 
} 

CSS样式2：

.list_carousel { 
    background-color: #222; 
} 

有用于传送带更多的CSS class和id，但是这是编辑div的，只有一个，如你所见，它没有高度或位置的设置。当我将位置固定时，它落在页脚下方，没有滚轮。

因此，现在mainContent div扩展到浏览器的底部，div内的一些内容现在隐藏在mainContent之下的div之后，例如旋转木马，甚至在页脚后面。

Answer 1

尝试下面的CSS，可能是你需要这个看Fiddle Demo

CSS：

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    color: #000305; 
    line-height: 1.429; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
} 

.mainContent { 
    height: 100%; 
    flex: 1; 
    position: relative; 
    background-color: #333; 
    line-height: 25px; 
} 

.list_carousel { 
    background-color: #222; 
    position: relative; 
} 

.list_carousel ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: block; 
} 

.list_carousel li { 
    margin: 10px; 
    text-align: center; 
    display: block; 
    float: left; 
} 

.list_carousel.responsive { 
    width: auto; 
    margin-left: 0; 
} 

.mainFooter { 
    position: relative; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: 150px; 
    width: 100%; 
    float: left; 
    padding-left: 0; 
    background-color: #000; 
    color: #CCC; 
}