滾動圖像不起作用

以下代碼不能按預期工作。滾動圖像不起作用

的index.html

#header { 
 
    z-index: 2; 
 
    height: 90px; 
 
    width: 100%; 
 
    min-width: 1060px; 
 
} 
 
#footer { 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 
#top-wrapper { 
 
    overflow-x: auto; 
 
} 
 
#main-content { 
 
    min-width: 1060px; 
 
    position: absolute; 
 
    overflow-y: auto; 
 
} 
 
#image-wrapper { 
 
    padding-left: 20%; 
 
    padding-right: 20%; 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 
#coordinations { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 500px; 
 
}

<div id="top-wrapper"> 
 
    <div id="header"> 
 
    <!-- some nav menu --> 
 
    </div> 
 
    <div id="main-content"> 
 
    <div id="image-wrapper"></div> 
 
    <div id="coordinations"></div> 
 
    </div> 
 
    <div id="footer"> 
 
    <!-- some footer note --> 
 
    </div> 
 
</div>

這裏的問題是我的滾動具有無形#coordination格，這是我不能讓它變成零或擺脫（因爲它有我需要在＃image-wrapper div上使用所有的協調）。

我試圖做頂部＃main-content div的無形div，所以使用overflow-y但它不起作用。我試圖將＃主要內容包含在較大的div和最小高度內以達到某個x值。它仍然不起作用。

任何可能的方式，我可以＃映像包裝沒有從#coordinations不可見的內容？

更新

#coordinations 
{ 
position:relative; 
width:100%; 
height:0px; 
}

對不起，我沒有看到這一點，而是通過改變位置相對和高度爲0px。＃協調點的協調點或孩子不受影響。

謝謝你的幫助。

來源

2016-09-26 Kim.L By

完全隱藏元素的唯一方法是將'display：none'添加到它。「可見度：隱藏」只是隱藏它，但它仍然佔用空間。「不透明度：0」只會使元素100％透明，它仍然存在並可點擊。 – pol

感謝Pol，'display：none'很好，但是我失去了孩子div中的所有信息。另外兩個不做任何修改。我現在想要拉我的頭髮哈哈，看起來沒有其他辦法可以解決這個問題。 –

您已經有#coordinations設置爲display: absolute，爲什麼不把它在屏幕上移動一個left: -9999px;？

來源

2016-09-27 00:05:59

'＃main-content'仍然看到小孩div'＃coordinations'，並且通過將#coordinations移出屏幕，所有的小孩div也被移出屏幕。對不起，我不能使用這個:(。 –

不用擔心，我真的不明白什麼內容進入'＃coordinations' div，爲什麼它不能簡單地設置爲'display：none'或者關閉或許你的問題中的更多信息和示例內容會使其更清晰，並且有人可以提供幫助。 –

滾動圖像不起作用

回答

相關問題