Question

我正在使用css灵活的垂直布局，其中包含两个div元素。我希望第一个元素被冻结，第二个元素只有当它的内容比可用高度大时才显示垂直滚动条。

我设法通过一个小问题来实现它。在基于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中按预期工作。

任何想法如何在不需要时摆脱垂直滚动条。

Answer 1

您可以使用overflow-y: auto;使垂直滚动条仅在需要时显示。我有一个小提琴，基于我的假设，你正在做你想要的。我添加了一个额外的类，使用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>

<强> JSFiddle

<强>更新

使用height: 100%;代替calc()更有意义，因此您可以参考此Fiddle中的HTML和CSS。

基于webkit的浏览器（Chrome和Safari）上的CSS灵活布局滚动问题

1 个答案: