forked from BoCupp-Microsoft/VirtualKeyboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfixed-top.html
36 lines (36 loc) · 989 Bytes
/
fixed-top.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: sans-serif;
font-size: 40px;
}
.top, .bottom {
position: fixed;
width: 100vw;
padding: 20px;
}
.top {
top: 0;
background-color: blue;
}
.bottom {
bottom: 0;
background-color: green;
}
input[type=text] {
font-family: sans-serif;
font-size: 40px;
padding: 10px;
}
</style>
<div class="top">TOP FIXED <input type="text" placeholder="put focus here..."></div>
<script type="module">
visualViewport.addEventListener("resize", e => {
let {width, height} = visualViewport
let {innerHeight, innerWidth} = window
console.log(`VV: ${width} x ${height}; LV: ${innerWidth} x ${innerHeight}`)
})
</script>
<!--div class="bottom">BOTTOM FIXED <input type="text" placeholder="put focus here..."></div-->