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; 
}