html页面高度自适应的特点,css如何高度自适应浏览器高度？

悠悠 2022-10-06 08:00 354阅读 0赞

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。

![682b19391f39045abdd274ba569a6594.png][]

在IE7+及chrome、firefox等浏览器中，高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的。

在IE6中的思路是，把html和body元素的高度设定为100%，即浏览器窗口的高度，然后利用padding-top在html元素上挤出一点空间来，因为绝对定位的最高参照物是参照html元素的，所以可以把顶栏绝对定位在html的padding-top那块空间上。

实现高度自适应浏览器高度代码：

高度自适应布局

html,body\{ height:100%;\}

body,div\{ margin:0; padding:0; color:\#F00;\}

\* html\{ padding-top:100px;\}/\*for ie6\*/

.top\{ background:\#36C; height:100px;\}

\* html .top\{ background:\#36C; height:100px; position:absolute; top:0; width:100%;\}/\*for ie6\*/

.main\{ background:\#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;\}

\* html .main\{ background:\#F90; position:static; height:100%;\}/\*for ie6\*/

我是top，固定高度

我是main，高度随浏览器大小变化而变化

效果图：

非IE6浏览器：

![976c09307dae0596a1603e2591460013.png][]

IE6浏览器：

![6ff350f0b1553a3ab44a143466b2d173.png][]

[682b19391f39045abdd274ba569a6594.png]: /images/20221005/02633330da1f47d2bf516c72dead0ec0.png
[976c09307dae0596a1603e2591460013.png]: /images/20221005/b471cb499d63413488bf0b44e8d781bf.png
[6ff350f0b1553a3ab44a143466b2d173.png]: /images/20221005/dd2d6766062849bbad44fb3d5694959a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，354人围观）

还没有评论，来说两句吧...

相关阅读

相关高度自适应和高度塌陷

高度自适应的情况： 1. 高度不去设置，或者高度设置auto 内容撑开父元素的高度。 2. 内容撑开父元素的高度 -> 最小高度的设置 min-height 3. 浮动

灰太狼/ 2023年07月20日 08:22/ 0 赞/ 32 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 355 阅读

相关 HTML 高度自适应布局

定义：高度自适应表示，在浏览器窗口边界变化，或在浏览器显示比例调整，这一过程中，浏览器中元素随着上述变化而自适应改变 height 属性值的特性。原理：当一个元素是

偏执的太偏执、/ 2022年09月26日 00:21/ 0 赞/ 216 阅读

相关 iframe自适应高度

function setIframeHeight(iframe) \{ if (iframe) \{ var iframeWin

妖狐艹你老母/ 2022年09月24日 08:29/ 0 赞/ 292 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 329 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 320 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 364 阅读

相关 css实现左边高度自适应右边高度

css样式： <style> .container { width: 960px;

一时失言乱红尘/ 2022年04月11日 14:07/ 0 赞/ 470 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 531 阅读

相关 iframe高度自适应

子页面头部是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

柔光的暖阳◎/ 2021年07月26日 12:30/ 0 赞/ 574 阅读