时间：2022-07-27 23:30:01 | 来源：网站运营
时间：2022-07-27 23:30:01 来源：网站运营
在线咨询
<body> <div class="header"></div> <div class="main"></div> <div class="footer"></div></body>根据页面滚动的位置分为两种布局，一种是滚动 body，另一种是固定 body 的高度为100%，在 main 中滚动。body { overflow: auto;}.header,.footer { position: fixed; left: 0; right: 0; height: 44px;}.header { top: 0;}.footer { bottom: 0;}.main { height: 100%; padding: 44px 0;}第一种情况比较适合长列表页面，整个页面除了 header 和 footer 之外都需要滚动，但很多时候，我们只希望页面的某个元素滚动，这个时候，就采取第二种布局方式。html, body { height: 100%; overflow: hidden;}.header,.footer { position: fixed; left: 0; right: 0; height: 44px;}.header { top: 0;}.footer { bottom: 0;}.main { height: 100%; padding: 44px 0; box-sizing: border-box;}fixed 定位实现起来简单，在大多数浏览器中也能正常显示，但是 fixed 定位在移动端会有兼容性问题，后面会提到，所以不建议这种实现方式。<body> <div class="main"></div> <div class="header"></div> <div class="footer"></div></body>但这样显然不太符合一般人的思维习惯，代码可读性降低。<body> <div class="header"></div> <div class="main"> <div class="scroll-container"></div> </div> <div class="footer"></div></body><style> .main { overflow: hidden; } .scroll-container { height: 100%; overflow: auto; }</style>body { padding: 44px 0;}.main { padding: 0;}2. 给 fixed 节点设置 z-index.header,.footer { z-index: 8888;}看到这里可能会有小伙伴觉得，一个简单的布局，还要绕过这么多坑，难道没有简单的方式吗，答案当然是肯定的，那就是第三种实现方式，flex 布局。flex 定位在移动端兼容到了 iOS 7.1+，Android 4.4+,如果使用 autoprefixer 等工具还可以降级为旧版本的 flexbox ，可以兼容到 iOS 3.2 和 Android 2.1。而且用 flex 实现起来相对简单，在各个浏览器里表现也相对一致。实现如下:body { display: flex; flex-direction: column;}.main { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;}.header { height: 44px;}.footer { height: 44px;}inputElement.addEventListener('input', function(event) { let regex = /[^1-9a-zA-Z]/g; event.target.value = event.target.value.replace(regex, ''); event.returnValue = false});这段代码在 Android 上是没有问题的，但是在 iOS 中，input 事件会截断非直接输入，什么是非直接输入呢，在我们输入汉字的时候，比如说「喜茶」，中间过程中会输入拼音，每次输入一个字母都会触发 input 事件，然而在没有点选候选字或者点击「选定」按钮前，都属于非直接输入。var inputLock = false;function do(inputElement) { var regex = /[^1-9a-zA-Z]/g; inputElement.value = inputElement.value.replace(regex, '');}inputElement.addEventListener('compositionstart', function() { inputLock = true;});inputElement.addEventListener('compositionend', function(event) { inputLock = false; do(event.target);})inputElement.addEventListener('input', function(event) { if (!inputLock) { do(event.target); event.returnValue = false; }});@mixin commonStyle() { background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top;}@mixin border($border-color) { @include commonStyle(); background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);}@mixin hairline-common($border-radius) { position: relative; z-index: 0; &:before { position: absolute; content: ''; border-radius: $border-radius; box-sizing: border-box; transform-origin: 0 0; }}@mixin hairline($direct: 'all', $border-color: #ccc, $border-radius: 0) { @include hairline-common($border-radius); &:before { transform: scale(.5); @if $direct == 'all' { top: 0; left: 0; width: 200%; height: 200%; box-shadow: 0 0 0 1px $border-color; z-index: -1; } @else if $direct == 'left' or $direct == 'right' { #{$direct}: 0; top: 0; width: 0; height: 200%; border-#{$direct}: 1px solid $border-color; } @else { #{$direct}: 0; left: 0; width: 200%; height: 0; border-#{$direct}: 1px solid $border-color; } }}关键词：移动
