带有局部滚动的移动端页面如何让页面正好一屏,即滚动容器的高度与非滚动部分的高度加起来正好一屏的高度

witzzy
  • 131

页面结构:

<body>
  <header></header>
  <section></section>
  <scroller-wrap>
    <scroller-content></scroller-content>
  </scroller-wrap>
</body>

问题

如何让headersectionscroller-wrap的高度正好为100vh,是不是必须要用js辅助才能实现

回复
阅读 2.8k
3 个回答
✓ 已被采纳

用我评论里的思路解决了,在这里copy一下吧。

我刚刚想了一个js的思路,分别获取页面的高度bodyHeight和scroller-wrap相对于页面的位置得到与页面顶部的距离scrollerTopHeight,然后两者的差值就给scroller-wrap做高度

感觉js辅助更好写,你不知道各个## 标题文字 ##移动设备的屏幕高度是多少,用js去判断赋值高度是比较好的

Reachel
  • 2.6k

让页面高度100%,其余板块平分100%的高度就可以了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <style>
    *{padding:0; margin:0;}
    html,body{height:100%;}
    .wrap{height:100%;}
    .top{height:50%; background-color:#666;}
    .scroll{height:50%; overflow-y:scroll; background-color:#999;}
    .scroll-content{height:600px; background-color:#000; color:#fff;}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="top"></div>
    <div class="scroll">
      <div class="scroll-content">
        我是滚动区域
      </div>
    </div>
  </div>
</body>
</html>
宣传栏