上下布局高度自适应屏幕

偏执的太偏执、 2022-12-10 02:26 182阅读 0赞

## 要求上下布局： 高度撑满整个屏幕 ##

##### html #####

<div class="layout">
        <div class="header">111111</div>
        <div class="content"></div>
    </div>

*  方法一： 使用position：absolute定位脱离文档流的原理来实现。

<style type="text/css"> * { 
                margin: 0;
                padding: 0;
            }
            html,body{ 
                height: 100%;
            }
    
            .layout { 
                width: 100%;
                height: 100%;
            }
    
            .header { 
                background: #7AFFAF;
                height: 100px;
            }
    
            .content { 
                background: #7A88FF;
                width: 100%;
                position: absolute;
                top: 100px;
                left: 0;
                bottom: 0;
            }
        </style>

*  方法二：使用box-sizing:border-box属性，设置padding和负值margin来实现

<style type="text/css"> * { 
                margin: 0;
                padding: 0;
            }
    
            html, body { 
                height: 100%;
            }
    
            .layout { 
                width: 100%;
                height: 100%;
                padding: 100px 0 0;
                box-sizing: border-box;
            }
    
            .header { 
                background: #7AFFAF;
                height: 100px;
                margin: -100px 0 0;
            }
    
            .content { 
                background: #7A88FF;
                height: 100%;
            }
        </style>

*  方法三：box-sizing+position：absolute实现

<style type="text/css"> * { 
                margin: 0;
                padding: 0;
            }
    
            html, body { 
                height: 100%;
            }
    
            .layout { 
                width: 100%;
                height: 100%;
                padding: 100px 0 0;
                box-sizing: border-box;
            }
    
            .header { 
                background: #7AFFAF;
                height: 100px;
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }
    
            .content { 
                background: #7A88FF;
                height: 100%;
            }
        </style>

*  方法四：使用calc直接计算，但是要注意，`曾祖父元素，父元素，子元素`均需设置`height:100%`

<style type="text/css"> * { 
                margin: 0;
                padding: 0;
            }
    
            html, body { 
                height: 100%;
            }
    
            .layout { 
                width: 100%;
                height: 100%;
            }
    
            .header { 
                background: #7AFFAF;
                height: 100px;
                width: 100%;
            }
    
            .content { 
                background: #7A88FF;
                height: calc(100% - 100px);
            }
        </style>

发表评论取消回复

表情：

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

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

相关阅读

相关设置高度自适应不同设备屏幕的高度

qq音乐的歌曲播放页面，页面的宽度和设备宽度是一致，这时候我们就用的flex布局，但是首先要设置html和body宽度都为100%，因为百分比布局是相对父级元素来说的，有以下h

系统管理员/ 2023年07月05日 10:25/ 0 赞/ 14 阅读

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

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

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

相关 HTML 高度自适应布局

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

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

相关自适应设备屏幕布局

//在不同设备大小下，只要更改html的font-size值即可 (function(win) { var d

谁借莪１个温暖的怀抱￠/ 2022年07月14日 11:11/ 0 赞/ 250 阅读

相关 ImageView宽度填满屏幕，高度自适应

> 原文链接：[http://blog.csdn.net/easion\_zms/article/details/50263409\comments][http_blog.cs

你的名字/ 2022年06月17日 04:45/ 0 赞/ 295 阅读

相关 Android布局之屏幕自适应

Android布局之屏幕自适应在做应用时发现程序没有屏幕自适应功能，变换手机使用之后，界面就很混乱了，字体也很奇怪。经过百度的帮助，找到自适应

迷南。/ 2022年06月13日 07:09/ 0 赞/ 276 阅读

相关 Android布局之屏幕自适应

Android布局之屏幕自适应在做应用时发现程序没有屏幕自适应功能，变换手机使用之后，界面就很混乱了，字体也很奇怪。经过百度的帮助，找到自适应方法。

电玩女神/ 2022年05月15日 00:37/ 0 赞/ 450 阅读

相关让div元素自适应浏览器屏幕高度

很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度，比如左侧菜单高度自适应所以可以用window.innerHeight然后绑定到元素上面如图，我用vue，jq

た入场券/ 2022年05月11日 03:36/ 0 赞/ 1018 阅读

相关 APP布局之高度自适应【适合任意手机】【js获取手机屏幕宽度、高度】

屏幕可用工作区高度就是你手机的实际高度，用vue开发的话代码案例【一定要加上单位px，否则没效果】： <template> <div class="a

曾经终败给现在/ 2021年09月19日 02:28/ 0 赞/ 395 阅读

相关高度自适应

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

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