HTML 高度自适应布局

偏执的太偏执、 2022-09-26 00:21 215阅读 0赞

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

原理：当一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的 top、right、bottom、left 属性决定的，换言之，自身的属性是由自身周围周围的绝对布局元素决定的 。这样，就可以实现元素的高度和宽度自适应布局了。

实现：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>高度自适应布局</title>
    <style>
    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*/
    </style>
    </head>
    <body>
    <div class="top">我是top，固定高度</div>
    <div class="main">我是main，高度随浏览器大小变化而变化<p style="height:500px;"></p></div>
    </body>
    </html>

效果：

![w3c][]

此外，还可以通过设置底边 fixed ，上边的 div 做relative 处理。

[w3c]: /images/20220717/4e5d4c0f74f24cb7ad97513021b9db54.png

发表评论取消回复

表情：

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

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

相关阅读

相关 html、css 实现网页布局（高度适应内容）

布局：排列页面中的区域；布局写起来不难，但是里面蕴含着许多基本知识我下面讲的布局方式，都是自适应的（若你要将布局全部定宽，看完本文，这对你来说更是没有难度了，把下文中代码出

╰+哭是因爲堅強的太久メ/ 2023年06月21日 03:44/ 0 赞/ 8 阅读

相关上下布局高度自适应屏幕

要求上下布局：高度撑满整个屏幕 html <div class="layout"> <div class="header">111111<

偏执的太偏执、/ 2022年12月10日 02:26/ 0 赞/ 201 阅读

相关 android设置布局高度自适应,Android XML灵活布局之 EditText实现自适应高度同时限制最小和最大高度...

Android中使用XML布局应该是全部安卓开发者最熟悉的操做了，各类布局的特性想必你们也都了如指掌。可是，真正利用好各个布局以达到性能最优，或者配合实现一些单个布局没法实现的

「爱情、让人受尽委屈。」/ 2022年10月16日 00:43/ 0 赞/ 286 阅读

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

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

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

相关 HTML 高度自适应布局

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

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

相关 HTML教程：如何设置Iframe自适应高度

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给i

╰+哭是因爲堅強的太久メ/ 2022年08月07日 14:56/ 0 赞/ 60 阅读

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

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

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

相关 HTML-视频高度自适应解决方法

使用开源video.js 项目地址：[https://github.com/videojs/video.js][https_github.com_videojs_video

墨蓝/ 2022年05月17日 12:25/ 0 赞/ 860 阅读

相关 html textarea文本域高度自适应

1、可直接在 [菜鸟教程网站测试页面中测试][Link 1] <!DOCTYPE html> <html> <head> <meta cha

怼烎@/ 2022年03月17日 13:10/ 0 赞/ 328 阅读

相关高度自适应

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

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