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

发布于
2018-03-15

页面结构：

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

问题

如何让header、section和scroller-wrap的高度正好为100vh，是不是必须要用js辅助才能实现

html5 css javascript

阅读 3.6k

3 个回答

得票最新

witzzy

13131222

发布于
2018-03-15

✓ 已被采纳

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

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

overFlow

2436

发布于
2018-03-15

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

Reachel

2.6k1114

发布于
2018-03-15

更新于
2018-03-15

让页面高度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>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

页面结构：

问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

快开发完的Vue3项目要做SEO该如何处理？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？