HTML——height：100%问题

最新推荐文章于 2023-04-23 12:42:26 发布
转载 最新推荐文章于 2023-04-23 12:42:26 发布 · 92 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/keyblog/archive/2013/04/19/3030269.html

本文介绍了在IE6及IE8浏览器中实现元素100%高度的CSS技巧，针对不同版本的IE浏览器提供了特定的解决方案。

对于ie6

一层套一层的写上height:100%,如

html{

height:100%;

}

body{

height:100%;

}

div{

height:100%;

}

对于ie8

除了有ie6所要求的以上这些，还要求有

form{

height:100%;

}

转载于:https://www.cnblogs.com/keyblog/archive/2013/04/19/3030269.html

Gradio全解11——Streaming：流式传输的视频应用（4）——基于WebRTC的摄像头实时目标检测
shao918516的博客
05-05 1729
本章讲述流式传输的应用，包括音频、图像和视频格式的流式传输。音频应用包括流式传输音频、构建音频对话式聊天机器人、实时语音识别技术和自动语音检测功能；图像应用包括基于WebRTC的摄像头实时目标检测；视频应用包括构建视频流目标检测系统。
Event事件学习实用路线（9）——Event事件之键盘事件——案例：键盘操作元素位置——案例：键盘事件组合键控制
xiao廸要飞
04-25 1077
Event事件之键盘事件键盘事件keydown、keyup键盘事件-事件对象event.keyCode、event.keyevent.ctrlKey、event.altKey、event.shiftKey 键盘事件 keydown、keyup 这两事件没太多好说的，非常简单，大家看代码即可掌握了。 document.addEventListener("keydown",...
html,body{height:100%}
ilipan的专栏
10-01 1297
html, body { height: 100%; } 解析：IE 处于标准模式时，body以html标签为高度参照，html标签才以窗口为参照，所以仅仅body 100%，并不能使它的子div100% 占据整个屏幕，还要使得 html 100%使得 html获得窗口大小才行。 body { height: 100%; } 解析：IE 处于混杂模式时，body以窗口
CSS13_由html{height: 100%} 引发的CSS百分比宽高度的思考
linxwx的博客
11-20 1439
html {height: 100%}，其高度是浏览器给的
html 最高高度,html的height:100%;高度是多少
weixin_42116650的博客
06-18 4327
html的height:100%;高度是多少html设置height:100%;表示一屏高度，类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中，设置页面高度为1屏幕高度通常设置：html,body{height:100%;margin:0;padding:0;}可以通过案例设置来查看html的实际高度。通过案例中改变窗口的高度大小，可以发现html的高度也是在变换的。html设置...
为什么设置height:100%有时没有生效的原因
jian091309的博客
04-23 4507
为什么设置height:100%有时没有生效的原因
（三）编写页面结构 编写轮播图区域 <swiper indicator-dots="true" indicator-color="blue" indicator-active-color="red" autoplay="true" circular="true" interval="3000"> <swiper-item> <view class="item"> <image src="/images/swiper01.png" mode="aspectFill" style="width: 100%; height: 100%;" /> </view> </swiper-item> <swiper-item> <view class="item"> <image src="/images/swiper02.png" mode="aspectFill" style="width: 100%; height: 100%;" /> </view> </swiper-item> <swiper-item> <view class="item"> <image src="/images/swiper03.png" mode="aspectFill" style="width: 100%; height: 100%;" /> </view> </swiper-item> </swiper> ———————————————— 在微信开发者工具哪里编写哪编写
03-24
height: 100%; } image { width: 100%; height: 100%; } ``` - **JS 脚本逻辑** 提供数据支持以及动态行为控制。 ```javascript Component({ properties: { images: { type: Array, value: [] }, ...
页面的百分比布局
qq_35315439的博客
08-15 4913
写一个产业图谱的页面已经很久，却从没有进行复盘过。自己细细一想，自己写的页面，对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。 知识点： 基本的Html页面构成： //<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!doctype html> <html> <head> <meta charset="utf-8">
HTML5性特性——Canvas——案例：绘制笑脸
qq_37622857的博客
09-04 1900
功能： 创建张嘴笑脸再绘制闭嘴笑脸1秒切换一张 1.HTML页面 <canvas id="c3" width="500" height="400"></canvas> 2.CSS样式 body{text-align: center;} canvas{background:rgb(243, 245, 240);} 3.JS文件 //...
html,body设置{height:100%}
零怀念的博客
09-29 4920
一般情况下，我们css控制的最高节点就是body，例如设置： body{background:#069;} 则浏览器界面就是完全的#068的背景色。这里看上去是<body>标签下的背景色起作用了，我到不这么认为，这里不是body的background起作用，而是body作为一个根节点起作用了，<html>标签未被激活，body担当类似于根节点的节点，其background背景色被浏览器俘获，浏览器界面背景色为background的背景色，以上是我的推论，这种推论不是我凭空想象出
关于html,body{height:100%}的理解
suandfei的博客
10-27 5043
有时候你看到别人写css代码的时候会发现:html,body{height:100%} 首先我们先看下w3c 对于height的定义 : 首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字. <!DOCTY...
【转载】html和body
陌笙以笙箫
02-28 664
by zhangxinxu from http://www.zhangxinxu.com转载地址：http://www.zhangxinxu.com/wordpress/?p=259关于html与body的一些表现1.背景色一般情况下，我们css控制的最高节点就是body，例如设置：body{background:#069;}则浏览器界面就是完全的#068的背景色。这里看上去是&lt;body&g...
CSS | width、height中auto与100%与固定值有什么不同
热门推荐
Errorong的博客
07-08 2万+
由于多次在设置width及height处出错导致不显示，总结了一篇固定值与auto、100%的差别，前面举例对比部分有基础的同学可以略过直接看总结。总结：（1）width、height使用固定值是一定会显示的，但是除非是小型项目或是特殊情况，最好不要使用固定值。不利于响应式开发，当从移动端看页面就会非常不美观。（2）不设置width、height时默认为auto，当position不同时显示效果不...
根据虹软实现的 人脸检测、追踪、识别、年龄检测、性别检测 的JAVA解决方案
09-11
打开下面链接，直接免费下载资源： https://renmaiwang.cn/s/vxfyv (最新版、最全版本)根据虹软实现的 人脸检测、追踪、识别、年龄检测、性别检测 的JAVA解决方案
matlab YALMIP、GLPK安装资源
最新发布
09-11
matlab的YALMIP、GLPK安装包，内置YALMIP、GLPK，直接将分别其添加到matlab的toolbox、路径中即可（matlab主页-设置路径-添加并包含子文件夹-YALMIP；matlab主页-设置路径-添加文件夹-github_repo）
【scratch3.0少儿编程-游戏原型-动画-项目源码】打砖块.zip
09-11
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用scratch3.0少儿编程游戏、动画源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
uniapp中设置.container { width: 100%; height: 100%;}并不能占据整个页面什么原因
09-05
<think> 首先，用户的问题是：在Uniapp中设置`.container { width: 100%; height: 100%; }`却不能占据整个页面，需要查找原因。用户提供了三个引用内容，我应该参考这些内容来回答。 回顾引用内容： - 引用[1]：提到百分比高度需要父元素有设置的高度。例如，如果.container的父元素（如page）没有设置高度，那么height: 100%就会失效。解决方法包括设置父元素的高度为100%，或者使用绝对定位。 - 引用[2]：是关于聊天界面布局的，提到了使用calc来计算高度，确保消息列表占据屏幕剩余空间。 - 引用[3]：讨论了滚动隔离和防止滚动穿透的问题，涉及设置固定高度和绝对定位。 用户的问题核心是：为什么在Uniapp中设置`.container { width: 100%; height: 100%; }`无法占据整个页面。 根据引用[1]，原因可能是： - 百分比高度需要一个参照物，即父元素必须设置高度。在Uniapp中，page元素类似HTML中的body，如果没有设置高度，那么.container的高度100%就会失效。 引用[1]明确指出：百分比一定要有一个参照物，那就是它的父元素，且父元素要设置宽高才能取百分比。container容器的父亲元素page没有设置宽高，所以container设置百分比失效。 解决方法包括： 1. 设置父元素page的宽高：page{ height: 100%; }，然后.container{ height: 100%; } 2. 直接在.container里写上position: absolute; height: 100%; width: 100%; ，因为绝对定位会根据已定位的父元素设置位置。 在回答中，我需要： - 使用中文回答（系统指令要求）。 - 结构清晰，帮助用户逐步解决问题。 - 保证回答真实可靠。 - 在回答中引用的段落末尾自然地添加引用标识，如[^1]。 - 生成相关问题（系统指令要求在末尾添加相关问题）。 回答结构： 1. **解释原因**：基于引用[1]，解释为什么height: 100%失效——因为父元素没有设置高度。 2. **提供解决方法**：给出具体的代码示例，参考引用[1]。 3. **扩展建议**：可能结合其他引用，如引用[3]中的滚动隔离优化，但用户的问题是关于占据整个页面，不是滚动问题，所以先专注于核心问题。 4. **生成相关问题**：在末尾添加相关问题。 用户说“上述引用仅供参考，并不是用户真正的需求”，但既然提供了，我应该参考它来回答核心问题。用户上一次的问题似乎是关于这个布局问题。 我的回答应该： - 清晰、直接。 - 使用LaTeX语法正确：如果需要数学表达式，但这里可能不需要，因为是CSS问题。 - 独立公式使用$$...$$，但不需要。 - 行内表达式使用$...$，但可能不涉及数学。 回答内容： - 原因：父元素高度未设置。 - 解决方法：设置父元素高度或使用绝对定位。 - 代码示例：如.page { height: 100%; } 和 .container { height: 100%; }。 - 添加引用标识：提到引用[1]。 最后，生成相关问题： - 例如：1. 如何在Uniapp中实现全屏布局？2. 父元素高度设置的注意事项？3. 绝对定位在布局中的优缺点？ 确保回答真实可靠：我从引用中提取信息。 </think> ### Uniapp中设置`.container { width: 100%; height: 100%; }`无法占据整个页面的原因 在Uniapp中，当您为`.container`元素设置`width: 100%; height: 100%;`时，无法占据整个页面的根本原因是**百分比高度（height）需要一个明确的参照物**。具体来说，百分比高度依赖于父元素的显式高度设置，如果父元素高度未定义或无效，那么子元素的`height: 100%`就会失效。以下是详细解释和解决方法： #### 问题原因分析 1. **父元素高度未设置**： - 在Uniapp中，`.container`的父元素通常是`page`（类似HTML中的`<body>`）。如果`page`元素没有设置高度（或高度无效），那么`.container`的`height: 100%`就没有参照物，导致无法生效。 - 这是因为CSS规则要求：百分比高度必须基于父元素的实际高度。如果父元素高度是`auto`（默认值），子元素的百分比高度会失效，最终渲染为0或部分高度[^1]。 - 例如： ```css /* 错误示例：page父元素高度未设置 */ .container { width: 100%; height: 100%; /* 无效，因为page高度为auto */ } ``` 2. **继承链中断**： - 在移动端或小程序环境中（如Uniapp），根元素（如`page`）可能未继承设备高度。默认情况下，`page`高度可能由内容撑开，而非全屏高度。 - 宽度（`width: 100%`）通常能正常工作，因为宽度参照视口（viewport），但高度问题更常见，因为视口高度需要显式传递。 #### 解决方法 根据引用[1]的建议，以下是可靠且跨平台的解决方案： ##### 方法一：设置父元素高度为100% 通过确保`.container`的父元素`page`设置`height: 100%`，使百分比高度生效。 ```css /* 在App.vue或全局样式文件中设置 */ page { height: 100%; /* 确保父元素高度参照视口 */ } .container { display: flex; /* 可选，根据布局需求 */ flex-direction: column; width: 100%; height: 100%; /* 现在有效 */ } ``` - **优点**：语义清晰，符合CSS标准，适用于大多数场景。 - **注意**：确保`page`的父元素（如HTML根元素）已设置高度。在Uniapp中，通常需要在`App.vue`中全局设置`page`样式。 ##### 方法二：使用绝对定位 如果父元素高度设置复杂，可以直接为`.container`添加`position: absolute`，使其基于视口定位。 ```css .container { position: absolute; /* 脱离文档流，参照视口 */ top: 0; left: 0; width: 100%; height: 100%; /* 立即生效 */ display: flex; flex-direction: column; } ``` - **优点**：简单快捷，无需额外设置父元素高度[^1]。 - **缺点**：可能影响其他布局元素（如滚动或定位上下文），需测试兼容性。 #### 扩展优化建议 - **使用视口单位（推荐）**：为了更可靠的全屏布局，可以将高度设置为`100vh`（视口高度的100%）。这无需依赖父元素高度： ```css .container { width: 100%; height: 100vh; /* 直接参照设备屏幕高度 */ } ``` - **处理滚动穿透**：如果页面需要滚动（如引用[3]所述），添加`overflow: hidden`到父元素或使用`scroll-view`固定高度： ```css .container { height: 100vh; overflow: hidden; /* 防止内容溢出 */ } ``` - **平台兼容性**：在Uniapp中，不同平台（如H5、小程序）可能对高度解析有差异。建议在`App.vue`中全局设置基础样式，并测试各平台效果[^3]。 #### 验证步骤 1. 检查父元素高度：在开发者工具中，查看`page`元素的高度是否显示为具体值（如100%或100vh）。 2. 全局设置：在`App.vue`中添加`<style> page { height: 100%; } </style>`。 3. 测试效果：运行到不同平台（H5、小程序），确保.container占满屏幕。 如果以上方法无效，请检查是否有其他CSS规则覆盖了高度设置（如`min-height`或`max-height`限制）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值