[英]overflow-y: scroll not working in Firefox and Edge
I'm working on a website where I have a huge content, that I want to be scrollable. 我正在一个网站上工作,我想浏览很多内容。 However, my code only works in Chrome and not in Firefox or Edge. 但是,我的代码仅适用于Chrome,不适用于Firefox或Edge。
It seems to work when I set a fixed height for the #content
like height: 200px;
当我为#content
设置一个固定的高度(如height: 200px;
时,它似乎可以工作height: 200px;
. 。 But I want the content to always fill the rest of the screen height. 但我希望内容始终填充屏幕的其余高度。 The height of the header can change when I have a smaller screen, so CSS calc
wouldn't work out I think. 当屏幕较小时,标题的高度可以更改 ,所以我认为CSS calc
。
I could use javascript to calculate the height every time the screen size changes, but I would prefer a more elegant way without js. 每当屏幕尺寸改变时,我都可以使用javascript来计算高度,但是我更喜欢没有js的更优雅的方式。 (If there is one) (如果有)
html, body { height: 100%; } body { margin: 0px; } #container { width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: hidden; } #header { background-color: blue; min-height: 50px; height: 50px; } #content-container { flex: 1 1 auto; display: flex; align-items: stretch; } #nav { background-color: red; width: 150px; min-width: 150px; } #content { font-size: 15px; padding: 25px; overflow-y: scroll; }
<div id="container"> <div id="header"></div> <div id="content-container"> <div id="nav"></div> <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut dui id mauris pharetra auctor eu sit amet ante. Nunc sodales nisl quis purus lacinia fringilla. Mauris mollis sit amet metus et volutpat. Cras non ante lectus. Vestibulum ullamcorper ligula at iaculis pellentesque. Fusce nec fringilla libero, sed maximus eros. Sed aliquam semper augue, ac vulputate neque lobortis eget. Cras pulvinar, tortor non auctor lobortis, nulla dui semper augue, ut dictum massa magna vel urna. Mauris fringilla iaculis mattis. Mauris at mauris sed mauris fringilla rhoncus. Mauris vestibulum arcu eu lectus pellentesque facilisis. Nulla auctor nibh ac neque tincidunt rutrum. Vestibulum dapibus elit ex. Praesent id neque quis felis sodales elementum. Quisque condimentum pellentesque finibus. Morbi ut dictum est, vel iaculis lectus. Vivamus sed nunc scelerisque, mattis velit id, euismod odio. Suspendisse potenti. Suspendisse eros ante, eleifend ut dictum vitae, posuere sit amet turpis. Suspendisse congue vestibulum nulla a tincidunt. Nulla facilisi. Nullam vel leo neque. Suspendisse potenti. Curabitur vulputate vestibulum turpis, vitae rhoncus ante gravida sed. Sed vitae efficitur eros, consectetur ullamcorper nisl. Nunc turpis massa, dapibus ac elit eget, rutrum tincidunt nisi. Proin nec metus id metus ornare sollicitudin. Integer turpis purus, aliquam non est at, ultricies facilisis eros. Integer luctus nisl est, eget laoreet quam commodo ut. Proin in enim volutpat, viverra nunc non, elementum est. Integer eu placerat nisl. Nullam posuere maximus metus, ut blandit tellus. Vestibulum tristique luctus massa, eget mollis augue lobortis a. Curabitur fermentum id enim ac vestibulum. Praesent commodo orci cursus lobortis sodales. Nam pellentesque vulputate enim, eu porttitor libero dignissim in. Fusce ligula odio, facilisis sit amet mollis eget, tempor et erat. Quisque sit amet arcu mi. Duis sed tortor ex. Nunc elementum neque ex, in luctus sem egestas sed. Etiam quis lorem tincidunt, commodo lacus non, cursus tellus. Maecenas a bibendum ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis ut ullamcorper felis.</div> </div> </div>
update like 更新像
#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
overflow-y: hidden;
}
This is a known issue in Firefox, see Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable 这是Firefox中的一个已知问题,请参见Bug 1042151-flex-direction:column-reverse(或“ flex-direction:column; justify-content:flex-end”),带有溢出-y:auto不可滚动
https://github.com/philipwalton/flexbugs/issues/108 https://github.com/philipwalton/flexbugs/issues/108
update Like 更新喜欢
#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
height:100%
}
你能用max-height
而不是高度吗
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.