移动端页面高度设置

最新推荐文章于 2024-05-30 13:56:29 发布
最新推荐文章于 2024-05-30 13:56:29 发布
阅读量3k 收藏 1
点赞数
分类专栏： 前端之路 文章标签： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinshishenchao/article/details/100544954
版权

最近开发移动端页面，需要给页面设置背景颜色，但是发现高度不够，但是设置高度height：100% 后，没有效果。

设置为height：100vh 后，可以使用 不过我这里出现了 页面滚动 。然后查询资料后，发现了一个CSS3的属性 fill-available 可以自动填满可用高度。相关属性有fill-available, max-content, min-content, fit-content。

有兴趣可以看看

https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/

心之苍苍
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端获取当前屏幕的高度_UE4移动端地形理解 - 高度LOD
weixin_29369363的博客
12-24 610
此文为摘要，内容不全，原文包含了详细的代码分析，请到 https://zwcloud.net/#blog/109 查看环境： Unreal Engine 4.25.2此文主要分析移动端（ES3.1）从地形高度图到最终渲染的顶点高度的流程，顺带说明一下顶点在X/Y平面的分布，不考虑地面上的贴图混合（权重图），不考虑Landscape Layers，不考虑Hole、Grass等等内容的渲染。基本概念-...
移动端获取当前屏幕的高度_手机移动端屏幕宽高详解
weixin_30229479的博客
12-30 4938
### 前因目前的移动端布局，以响应式布局居多，以适应在不同分辨率的屏幕，实现布局的方式可能有很多种，但是不管使用哪种方式，获取设备的可用宽高就能为问题的关键。### 宽高的获取“`document.documentElement.clientWidthdocument.documentElement.clientHeightdocument.body.clientWidthdocument.bo...
关于移动端动态高度的研究
乄Cokie乄的博客
01-07 239
关于移动端动态高度的布局 当页面没有用到软键盘时，可使用calc()计算剩余高度 // html <div> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div> // style <style> .header { height: 10rem; }
移动端安卓和苹果浏览器的100vh的区别
最新发布
qq_43235503的博客
05-30 266
移动端安卓和苹果浏览器的100vh的区别
移动端的高度自适应
call_me_hoyin
04-21 3033
移动端的高度自适应
移动端设置元素高度为全屏
douyiqing的博客
08-23 3035
移动端开发中，经常用到某个块元素占满全屏，大家想到的第一个方法肯定是设置height：100%，但是这种方法是无效的，原因我相信大家应该都清楚，接下来我给大家介绍几种方法： 通过css进行设置 使用vw，vh进行设置，这种方法我平时自己做demo时候经常会用到。 vw,vh是css3新出的单位，1vw=1/100浏览器宽度，1vh=1/100浏览器高度。一般100vw就是整个屏幕宽度，100vh...
mark移动端页面开发.zip
03-18
"mark移动端页面开发.zip" 这个压缩包可能包含了一个完整的移动端页面开发项目，让我们一起深入探讨一下移动端页面开发的相关知识点。 1. 响应式设计：移动端页面开发首要考虑的是响应式布局，确保页面在不同设备和...
关于移动端页面强制竖屏的方法
09-22
【移动端页面强制竖屏的方法】 在移动设备上，用户习惯于竖屏模式浏览网页和使用应用，但在某些特定场景下，比如在一个横屏APP中嵌入一个需要竖屏展示的网页，就需要对页面进行强制竖屏处理。这篇文章将探讨如何在...
移动端页面设计rem-
09-13
在移动端页面设计中，"rem"（root em）是一个至关重要的概念，它为实现响应式设计提供了强大支持。本文将详细解析如何利用rem单位在HTML5页面中创建与设计图比例一致、在不同屏幕尺寸下仍能保持布局一致性的页面。 ...
手机移动端图片相册展示页面模板
07-12
6. **SEO优化**：尽管这是一个移动端页面，但搜索引擎优化（SEO）同样重要，尤其是对于希望吸引流量的网站。合理使用meta标签、alt属性，以及采用AMP（Accelerated Mobile Pages）技术可以提高页面在搜索引擎中的...
vue单页面实现pc移动端页面不同
05-19
本篇将详细介绍如何使用Vue.js实现PC和移动端页面的差异化展示。 首先，理解问题的核心：我们希望一个Vue项目能在PC和移动设备上呈现不同的布局和交互体验。这通常涉及到响应式设计和媒体查询（Media Queries）。...
移动端如何准确获取元素真实的宽高度,精确到小数点后两位
weixin_42369612的博客
05-12 1196
移动端如何准确获取元素真实的宽高度,精确到小数点后两位 获取元素的高度方法: 元素有个方法 offsetHeight 可以来获取元素高度 缺陷 使用offsetHeight会有一个问题,就是offsetHeight的高度会被四舍五入成一个整数,也就是说会丢失元素的高度精度 元素的实际高度为18.77px 而offsetHeight给出的高度为19px 如果在面对一些业务场景中需要不丢失精度的获取元素的高度,那么用offsetHeight来获取元素高度就不可行了 解决方案 使用 getComputedSt
关于移动端高度设置满屏的实现
热门推荐
前端小仙女
01-07 1万+
关于移动端高度设置满屏的实现 在开发小程序过程中，如果要设置盒子高度为全屏的话，设置hegiht：100%，属性不起作用，需要在设置的元素外边先定义： height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px; 然后在给需要的元素也这样设置，最后出来的效果就是宽高100%的啦。 前端小菜鸟，给自己留个笔记先。 ...
移动端页面元素尺寸解决方案之一
zhangxuekang的博客
01-03 400
如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位.主流做法基本也都是这样做的.但是,如果html5页面是在webview中打开的,并且webview不是通常的手机视窗尺寸,而是占了部分页面,使用rem单位的转化标准就没有了通用性.面对这种情况,可以尝试以下的解决方案. 使用transform的scale来适配所有尺寸的view 设计稿的尺寸一般是px,那么写页面的时候,就使...
前端移动端高度自适应
m0_56508592的博客
07-25 1691
为了子元素能够有效的使用百分比，给html和body的height设置百分比：html,body{width:100%;height:100%}，基于浏览器的解析规则。然后定义一个相对定位：{position:relative;} 这两天做项目，在对移动端前端页面做页面高度自适应固定时遇到了问题，显示效果是：整个页面为一个整体，上半部分显示地图，下半部分显示对应的驾校班型（我们是做驾校产品的），地图没有上间距，和班型下间距1-2个rem，班型和底部按钮间距为1-2rem，适应于不同手机和不同..
tinymce移动端使用_关于在移动端避免使用100vh的原因及解决方案
weixin_39625305的博客
11-19 800
1. 为什么避免使用100vhCSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。核心问题是移动浏览器...
移动端页面自适应大小
逆夏的博客
05-10 4074
移动端自适应大小
移动端(App)项目进行满屏高度的设置
bug收集
10-20 945
问题：做使用 Vue 做移动端 App 的时候，高度一般会根据页面的元素进行自动设置，不会铺满整个屏幕。解决方案：通过以下代码实现满屏高度，在App.vue 里设置 html,body,#app{ height: 100%; } 转自：https://www.cnblogs.com/ljy-/articles/12574119.html ...
CSS - PC / 移动端左右满屏高度布局（100% 高度 + 溢出滚动条）
王佳斌
08-25 2740
CSS - PC / 移动端左右满屏高度布局（100% 高度 + 溢出滚动条），Vue.js css左右布局，全屏幕并且内容超出时会出现滚动条，CSS 多种方法实现100%高度的容器，CSS子元素撑满父元素（height: 100%无效），css设置高度height: 100%滚动条无法显示的解决办法，html盒子模型子元素怎么水平占满父元素_CSS 盒模型，子元素高度撑满父级（父级未设置高度），css 移动端左右100%高度布局，css 高度100%并设置滚动条。
vue移动端怎么设置页面高度_vue移动端屏幕适配详解
06-06
对于移动端页面，我们通常使用vw（视窗宽度）和vh（视窗高度）来设置元素的尺寸，以适配不同的屏幕大小。同时，我们也需要设置页面的高度，以保证页面内容完整显示，并且在滚动时能够正常展示。 下面是一些设置页面高度的方法： 1. 使用CSS样式设置页面高度，例如： ```css html, body { height: 100%; } ``` 2. 使用JavaScript动态设置页面高度，例如： ```javascript document.documentElement.style.height = window.innerHeight + 'px'; ``` 3. 使用第三方库，例如viewport-units-buggyfill，它可以解决vw和vh在某些浏览器中不兼容的问题，并自动计算页面高度。 总之，设置页面高度需要考虑到屏幕适配和浏览器兼容性等因素，可以选择合适的方法进行设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值