爲什麼溢出：滾動不能在這個界面工作？

繼比如這個由CSS-技巧（https://css-tricks.com/almanac/properties/o/overflow/）文章建議，我建立引導一個角度驅動的應用雙窗格界面。這兩個窗格旨在從彼此和頁面整體垂直滾動。此行爲在此項目的最新版本中按預期工作，此處爲：https://monstermancer.herokuapp.com/（可能需要縮短瀏覽器窗口以查看在未登錄的情況下滾動的窗格）。如果相關，該版本的應用程序使用SystemJS和Angular 2.0.0-rc5。爲什麼溢出：滾動不能在這個界面工作？

近日，之後我做了採用了棱角分明CLI和更新角度的版本變化的WebPack，到2.2，但同時保持所有的HTML和大致相同，即滾動行爲不再起作用。看到它在「行動」在這裏：https://monster-mash.herokuapp.com/

我有一個codepen了從應用和關注的是僅滾動行爲此內隔離的樣本視圖：https://codepen.io/Polisurgist/pen/bBOZzm

從筆

相關CSS：

body { 
    overflow: hidden; 
} 
.scroll { 
    overflow-y: scroll; 
    overflow-x: hidden; 
    height: 100%; 
    padding-bottom: 50px; 
} 
::-webkit-scrollbar{ 
    display:none; 
}

我的假設是，不知怎的，我錯過了CSS的一個關鍵的一點，當我從老版本的代碼移動到新的，雖然我不能放置缺少的部分可能是什麼。我標記angularJS和的WebPack在這個問題上，不是因爲我認爲，要麼那些真正造成的問題，而是因爲有些問題可能被引入作爲抵押，向我作出此更新。

的核心問題，在這裏是的原因是什麼，如果有的話，在這個界面中的兩個窗格沒有垂直滾動？https://monster-mash.herokuapp.com/

來源

2016-12-18 Polisurgist

問題是#content, .row, col-sm8正在自動調整高度以適應內部內容，所以滾動不會出現。

要解決這一點，並獲得滾動你想要的行爲，你需要讓所有的父元素100％。您可以加給你的CSS這樣做（添加其他山坳類選擇爲neccessary名單）：

html, 
body, 
.row, 
.col-sm8, 
#content{ 
    height:100%; 
}

來源

2016-12-18 20:05:23 Daniel

這是真正有用的...我不能做_exactly_，在我的情況，但它告訴我從哪裏開始解決問題。我仍然很困惑，爲什麼它在一個案件中起作用，而不是另一個案件。 – Polisurgist

@Daniel雖然這是一種解決問題的辦法，並不能說明https://monstermancer.herokuapp.com/（工作）和https://monster-mash.herokuapp.com/之間改變什麼CSS（碎），在此期間OP沒有改變他的CSS。 –

所以，問題確實是父元素縮放以適應該內容，儘管設置CSS規則，因爲它們在這個答案中是不可行的，因爲這些與Bootstrap進行交互的方式。看起來工作的是使用'height：100vh'而不是'100％'，因爲它設置了基於視口而不是父元素的滾動容器的高度。不過，我可能會錯過這個原因，但這不是一個好主意。 – Polisurgist

爲什麼溢出：滾動不能在這個界面工作？

回答

相關問題