我正在使用包含两个 div 元素的 css 灵活垂直布局。我希望第一个元素被卡住，第二个元素仅在其内容大于可用高度时才显示垂直滚动条。
我已经设法通过一个小问题实现了它。在基于 webkit 的浏览器(如 Google Chrome 和 Safari)中，第二个 div 元素始终显示垂直滚动条。 请参阅 http://jsfiddle.net/psdzr/5/ 处的代码
<html>
<head>
<style>
html,body{
margin:0;
padding:0;
overflow:hidden;
height: 100%;
width:100%;
}
.sapMFlexItem {
position: relative;
}
.sapMFlexBox{
width:100%;
height:100%;
display:flex;
flex-direction:column;
}
div#mydiv { height: 100%; }
</style>
</head>
<body>
<div class="sapMFlexBox" style="background-color:red">
<div class="sapMFlexItem">One</div>
<div class="sapMFlexItem" style="height:100%; overflow:auto">
<div id="mydiv" style="background-color: green;">Hello</div>
</div>
</div>
</div>
</body>
</html>
它在 Internet Explorer 和 FireFox 中按预期工作。
知道如何在不需要时去掉垂直滚动条。
最佳答案
您可以使用 overflow-y: auto; 使垂直滚动条仅在需要时出现。我在这里有一个 fiddle ，根据我的假设，它正在做你想做的事。我使用 calc() 添加了一个额外的类，它提供了减去标题的完整高度，并为其设置了 overflow-y: auto。
CSS
html,body{
margin:0;
padding:0;
overflow:hidden;
height: 100%;
width:100%;
}
.sapMFlexItem {
position: relative;
}
.sapMFlexBox{
width:100%;
height:100%;
display:flex;
flex-direction:column;
}
.sapMFlexItem-scroll {
background: #ddd;
overflow-y: auto;
height: calc(100% - 20px);
}
HTML
<div class="sapMFlexBox" style="background-color:red">
<div class="sapMFlexItem">Item frozen</div>
<div class="sapMFlexItem sapMFlexItem-scroll">
Urna augue auctor, facilisis egestas et a est, hac sit lectus, vel dis facilisis duis urna sed! Magna augue pulvinar massa sit lundium scelerisque ut, adipiscing arcu, nec, tincidunt. Tincidunt! Ac, mattis etiam sagittis dolor phasellus! Dapibus porta, dignissim et magna elementum magna sit sociis dolor magnis in? Quis tortor? Nunc parturient. Ut proin mauris, tincidunt, rhoncus ut augue aliquet? Enim facilisis adipiscing, platea pid. Sit? Lectus vel ut elit lectus sagittis a lundium, vel. Urna turpis rhoncus sed ultrices dignissim velit penatibus tincidunt vel elementum amet lorem egestas mid tortor, duis etiam tortor aliquam? Sit lorem cursus integer velit.
Sed, pulvinar tincidunt, elementum! Sociis ac porttitor est in, adipiscing lectus, nisi turpis. Dapibus purus elementum elementum, nec, augue? Odio magna purus massa, scelerisque odio, risus sit. Tincidunt turpis rhoncus cum etiam, augue massa, et rhoncus aliquam, in vel? Mus augue, aliquam urna, in nisi magna tempor cum cras. Cursus vel augue porttitor! Aliquam nec risus nunc et in. Elit rhoncus, magna enim pellentesque, et magna dolor turpis natoque sagittis lacus! Porttitor dis platea proin! Vel etiam pid habitasse! Cum! Dictumst tristique integer massa penatibus mattis duis sit enim, et porta, aliquet pulvinar pellentesque porta! Amet nascetur, urna pellentesque.
Etiam sagittis ut! Urna aliquam tortor auctor? Natoque! Massa. Integer amet hac adipiscing rhoncus a, nec! Urna rhoncus vel eros tempor a ac sociis, non turpis odio lundium pulvinar aliquam lundium adipiscing arcu diam. Hac augue elementum porttitor vel, parturient massa elit proin vel cras? Vel! Lacus ac integer, in elementum! Scelerisque. Lacus? Ultrices pid, urna quis, duis ultricies! Eros, cras urna enim. Proin lectus turpis? Nunc sociis adipiscing. Ac sed, turpis turpis sagittis lectus tristique! Hac, in sociis tincidunt natoque urna? Turpis rhoncus. Augue adipiscing platea! Tempor lectus massa nunc mus odio porttitor mattis a sociis amet, ac.
Hac etiam diam. Turpis dapibus non ut enim augue aenean montes, scelerisque ut urna mid ac scelerisque pulvinar tortor velit adipiscing. Velit diam, a porttitor magna hac pulvinar purus! Magna hac. Hac turpis purus aenean. Non phasellus turpis? Nisi mus ac, et integer turpis ac dis et auctor dapibus. Porttitor tincidunt. Tincidunt porttitor scelerisque odio odio placerat! Turpis tortor platea mattis egestas magna, mattis turpis. Phasellus nec, odio lorem, in dapibus mauris sit sed, parturient aliquet. Aenean. Dignissim, penatibus aliquam vel aenean porta urna, proin ac platea vel sit diam, penatibus, non nunc adipiscing dis augue turpis ac augue.
Magnis cursus a, pulvinar sed integer vut sit sed vut urna aenean sed nascetur in, aenean! Placerat facilisis natoque mus tincidunt non elementum lectus! Elementum dapibus augue aenean ultrices lacus odio? Porta? Dis nec, penatibus pulvinar rhoncus! Penatibus rhoncus, lectus in, mus mus, nascetur! Sed integer odio, enim dapibus nunc aenean, dictumst urna ultricies magna adipiscing duis enim lacus integer scelerisque dis est lundium aliquam lectus ut scelerisque ut enim habitasse sagittis urna, amet nec! Velit quis pellentesque integer. Sagittis dignissim augue lundium. Ut cursus placerat sit, adipiscing ac. In nec lectus adipiscing? Augue nec sed, cum augue vel.
</div>
</div>
更新
使用height: 100%; 代替calc() 更有意义，因此您可以引用此Fiddle 中的HTML 和CSS。 .
关于基于 webkit 的浏览器(Chrome 和 Safari)上的 CSS 灵活布局滚动问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22872347/