html页面100%高度,高度100%页面自适应布局详解 - 文章教程

最新推荐文章于 2024-08-14 19:32:44 发布
最新推荐文章于 2024-08-14 19:32:44 发布
阅读量2.5k 收藏 1
点赞数
文章标签： html页面100%高度
本文详细讲解如何使用CSS实现一个无框架的HTML页面，使其高度100%，并且在不同分辨率和浏览器下保持自适应布局。主要内容包括绝对定位、IE6兼容性解决方案，以及在Firefox和IE6下的效果展示。
摘要由CSDN通过智能技术生成

有时候可能我们会遇到这样的设计，内容需要在浏览器一屏范围内显示，而不会出现滚动滚动条查看内容的情况，如一些富Web应用，让你感觉更像在操作一个程序甚至是窗口界面系统。

a974a55acb399c7d7194c0e68c90cf06.png

追述过去，聊天室这类的Web应用就是如此，而往往我们会首先考虑框架元素(Frame)嵌入不同的 HTML 页面实现，特别是早期的类似 Ajax 应用就会用到框架这个古老的元素

但很显然，追求页面标准化和 Web 设计现代化的结构设计师不会首先框架，而我也因为个人原因比较厌恶这个玩意儿，好了讲了这么多废话，无非是想用无框架的做法将页面结构和样式做出来，并且要保证 IE 下完美(近似完美)的表现。

这是我的 HTML 内容，我所做的结构是一个简单的，由顶部、内容、尾部组成的页面：

Chat content here
Input Area

这是一个近似于 Omegle 匿名聊天室的结构。

顶部的 navBar 和底部的 chatInput 区域是固定高度的，但主

最低0.47元/天 解锁文章
葛通
关注
页面高度百分百
qq_43623306的博客
05-27 269
让图片铺满,并且可以滚动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
如何让 height:100%; 起作用
u013681996的专栏
12-05 684
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向
html页面缩放自适应
最新发布
蜡笔小新1980的博客
08-14 1409
在我们一般web端进行页面拼接完成后，在web端的显示正常（毕竟我们是按照web端进行页面拼接完成的），那么要是用其他设备打开呢，比如手机或者平板，这时候显示的比例和尺寸跟我们看到的就大相径庭了。由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示 一致。
【转载】html和body
陌笙以笙箫
02-28 589
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...
HCJ1：页面高度设置为百分百
qq_44700366的博客
08-17 715
将html页面高度设置为100%
如何设置网页页面高度100%
qq_43322823的博客
01-22 6201
网页页面高度铺满全屏的方法 在设置页面页面铺满的时候，还没开始我就发现了问题，高度是高度不像宽度，是无法设置为100%的； 但是h5融媒体都是铺满全屏的，所以一定是有什么方法的，因此我去度娘了。看到最多的还是屏幕自适应。在head标签内加入这段； &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; ...
关于前端布局---流式布局
CJB2020818的博客
09-13 1170
@[TOC]关于前端布局 前端的布局按其编写过程复杂程度可以分为传统布局与新式布局； 传统布局 所谓的传统布局就是不依赖与框架，主要是程序员根据CSS与HTML样式属性的运用来写的原生布局，比如dispaly、position、float等。 这种布局方式对程序员的基础知识要求较高，要会使用特定的样式属性，以及了解其使用的注意事项或者后期对布局的影响进行调试。但是，传统布局方式最大的好处就是其兼容性很好，对于IE6、IE7浏览器也能很好的兼容。 现代布局 新式布局，是对传统布局中存在的一些遗留疑难的解
详解flex实现左右布局中按钮溢出隐藏效果
09-22
我在左边，自适应布局 我在右边，定宽 ``` 相应的CSS样式如下： ```css #flex { display: flex; } #left { flex: 1; background: red; text-overflow: ellipsis; overflow: hidden; white-space: ...
HTML的grid教学,Grid布局方式的实例详解
weixin_42619448的博客
06-07 1597
前面的话Grid布局方式借鉴了平面装帧设计中的格线系统，将格线运用在屏幕上，而不再是单一的静态页面，可以称之为真正的栅格。本文将详细介绍grid布局引入对于Web开发者来说，网页布局一直是个比较重要的问题。但实际上，在网页开发很长的一段时间当中，我们甚至没有一个比较完整的布局模块。总的来说 Web 布局经历了以下四个阶段：1、table表格布局，通过 Dreamweaver 拖拽表格或者手写 ta...
CSS 网页布局（详解网页的布局构造）
百赢出品，必属精品
04-26 1970
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
table和div设置height:100%无效的完美解决方法
weixin_30652879的博客
03-18 1078
刚接触网页排版的新手，常出现这种情况：设置table和div的高height="100%"无效，使用CSS来设置height:"100%"也无效，为什么会这样呢？解决height:100%无效，table和div的解决方法并不相同。 首先说一下table，他比较容易解决，当我们使用Dreamweaver来制作网页，新建一张网页，通常在代码头部会有类似以下的代码：<!DOCTYPE ht...
html页面100%高度,CSS设计网页小技巧 100%的高度
weixin_34514378的博客
06-04 627
在前端人员之间有一个普遍存在的问题，如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现，但是，我想出了一个我个人比较喜欢的方法。今天，我将于你分享一下。我对你是不了解的，但我试图弄明白如何让我的布局垂直拉伸到页面的100％高度，这样一个令我沮丧的问题。我想让div结构自动延伸，但是它就是不能自动延伸，现在，为什么他不能这样那？今天我将与你一起分享这个解决方法。比方说你...
html div 高度100,关于html：如何使div达到窗口高度的100％？
weixin_34247778的博客
06-10 345
我只想有一个侧边栏，该边栏将是窗口高度的100％，但除此之外没有任何作用：#sidebarBack {background: rgba(20, 20, 20, .3);position: fixed;width: 250px;height: 100%;left: 0;}我不想有position: fixed，因为我具有水平可滚动的内容，所以固定的部分将保持不变。有什么方法可以做这样的事情，也许在r...
html设置 height 100%,解决html设置height：100%无效的问题
weixin_39637979的博客
06-19 170
C&num;中子类与父类的相互转换1.父类不能直接强制转换成子类 2.子类可以强制转换成父类,但是在父类中只能取父类的字段与方法 因此在一个父类对应多个子类的时候,不知道具体是哪个子类的时候,就可以先声明一个父类的类型.(如例1) 3 ...深刻理解Python中的元类metaclass(转)本文由伯乐在线-bigship翻译 英文出处:stackoverflow 译文:http:...
Javascript技巧之：body的height:100%高度，自适应窗口大小
quit1111的博客
11-29 1861
有的文章通过设置以下解决此问题，但改变了body的style.height会造成一些不必要的影响和麻烦，比如不必要的滚动条、超出body高度部分的显示问题等。经常需要设计一个全屏的html网页应用，但当你定义body直接子元素的高度为"100%"或通过以下代码设置元素高度时，确遗憾地发现body的高度并非当前窗口的可见高度。那么，有什么办法解决此问题呢？
html 最高高度,html的height:100%;高度是多少
weixin_42116650的博客
06-18 4183
html的height:100%;高度是多少html设置height:100%;表示一屏高度，类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中，设置页面高度为1屏幕高度通常设置：html,body{height:100%;margin:0;padding:0;}可以通过案例设置来查看html的实际高度。通过案例中改变窗口的高度大小，可以发现html的高度也是在变换的。html设置...
html页面如何变成百分之百,css height 100% CSS成功设置DIV高度百分之百
weixin_32927369的博客
06-04 5272
css height 100% ，使用CSS成功设置DIV高度百分之百,CSS height百分之百高度让html中第一个div(最外层div)高度100%(height:100%)实现。一、div高度百分百实现描述在html布局中body内第一个div盒子对象设置100%高度height样式，是无法成功显示100%高度的。这个是因为body高度默认值为自适应的，所以及时设置body第一个布局di...
html边框怎么设置100%宽度,边框100%身高和宽度(HTML 4.01严格)
weixin_30814157的博客
06-19 1470
正如SpliFF已经提到的，这个问题是因为默认(W3C)box model是“内容的盒子”，导致边界作为width和height之外。但是你希望那些在你指定的100%宽度和高度之内。一种解决方法是选择边框盒模型，但在IE 6和7中无法做到这一点，而不会恢复到怪癖模式。另一个解决方案也适用于IE 7。只需设置html和body至100%的高度和overflow到hidden摆脱窗口的滚动条。然后，你...
css宽度100%高度自适应
06-06
CSS是一种用于控制网页外观的样式语言，它具有很多属性可以用来控制网页元素的外观和布局。其中一个常见的属性是“width”，它用于设置元素的宽度。当我们将一个元素的宽度设置为“100%”时，它的宽度将会铺满其父元素的宽度，也就是说该元素的宽度会自适应其容器的宽度。 而对于高度，则有不同的处理方式。如果我们将一个元素的高度设置为“100%”，它并不会自动适应其父元素的高度。因为在HTML文档中，父元素的高度通常是由其内容来决定的，而不是固定的像素值。因此，要让元素自适应其父元素的高度，需要使用一些特殊的技巧。 其中一种方法是使用“flexbox”，即弹性盒模型。通过将父元素的“display”属性设置为“flex”，我们可以使其内部的子元素自动布局，而且可以通过设置“align-items”属性来控制子元素的垂直对齐方式。在这种情况下，我们可以将子元素的高度设置为“100%”，然后让其自适应父元素的高度。这个方法虽然比较复杂，但是可以实现比较复杂的布局。 还有一种方法是使用“position”属性和“top”、“bottom”属性来控制元素的位置和高度。我们可以将一个元素的“position”属性设置为“absolute”，然后设置其“top”和“bottom”属性为0，这样它就会紧贴着其父元素的顶部和底部，并根据父元素的高度自动调整自己的高度。这个方法比较直接简单，但是需要注意一些细节。 总之，CSS宽度100%高度自适应是可以通过一些特殊的技巧实现的，具体方法根据情况而异，需要根据具体需求来选择合适的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值