gpt4 book ai didi

javascript - 溢出-y : scroll not working in Firefox and Edge

转载 作者:太空宇宙 更新时间:2023-11-04 06:58:59 25 4
gpt4 key购买 nike

我在一个网站上工作,那里有大量内容,我希望可以滚动。但是,我的代码仅适用于 Chrome,不适用于 Firefox 或 Edge。

当我为 #content 设置固定高度时,它似乎可以工作,例如 height: 200px;。但我希望内容始终填满屏幕的其余部分。 标题的高度可以改变当我有一个较小的屏幕时,所以我认为 CSS calc 不会工作。

每次屏幕尺寸变化时,我都可以使用 javascript 来计算高度,但我更喜欢没有 js 的更优雅的方式。 (如果有的话)

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>

Here's also a codepen

最佳答案

更新喜欢

#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
overflow-y: hidden;
}

Here is the demo

关于javascript - 溢出-y : scroll not working in Firefox and Edge,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52217336/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com