在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 帶有局部滾動的移動端頁面如何讓頁面正好一屏，即滾動容器的高度與非滾動部分的高度加

帶有局部滾動的移動端頁面如何讓頁面正好一屏，即滾動容器的高度與非滾動部分的高度加起來正好一屏的高度

頁面結(jié)構(gòu)：

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

問題

如何讓header、section和scroller-wrap的高度正好為100vh，是不是必須要用js輔助才能實現(xiàn)

回答
編輯回答
卟乖

感覺js輔助更好寫,你不知道各個## 標(biāo)題文字 ##移動設(shè)備的屏幕高度是多少,用js去判斷賦值高度是比較好的

2017年10月16日 06:47
編輯回答
孤慣

用我評論里的思路解決了，在這里copy一下吧。

我剛剛想了一個js的思路，分別獲取頁面的高度bodyHeight和scroller-wrap相對于頁面的位置得到與頁面頂部的距離scrollerTopHeight,然后兩者的差值就給scroller-wrap做高度
2018年4月10日 14:46
編輯回答
幼梔

讓頁面高度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">
        我是滾動區(qū)域
      </div>
    </div>
  </div>
</body>
</html>
2017年6月14日 05:11