上下布局高度自适应屏幕

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

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

html

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

方法一：使用position：absolute定位脱离文档流的原理来实现。
方法二：使用box-sizing:border-box属性，设置padding和负值margin来实现
方法三：box-sizing+position：absolute实现
方法四：使用calc直接计算，但是要注意，曾祖父元素，父元素，子元素均需设置height:100%

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

相关 HTML 高度自适应布局

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

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

相关自适应设备屏幕布局

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

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

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

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

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

相关 Android布局之屏幕自适应

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

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

相关 css实现容器高度适应屏幕高度

<html>元素的高度默认是auto，被内容自动撑开； 100%：使得html的height与屏幕的高度相等； 50%：使得html的height等于屏幕的一半；若想让

左手的ㄟ右手/ 2022年05月30日 22:28/ 0 赞/ 1107 阅读

相关 Android布局之屏幕自适应

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

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

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

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

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

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

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

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