CSS设置盒子容器(div)高度(height)始终为100%

已于 2025-08-10 16:04:06 修改
阅读量1.1w 收藏 11
点赞数 7
CC 4.0 BY-SA版权
分类专栏： + CSS 文章标签： css 前端 javascript
于 2019-11-28 18:09:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/103199039
+ CSS 专栏收录该内容
63 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了一种让元素保持100%高度的CSS方法，即使在浏览器窗口大小变化时也能确保元素高度不变。关键在于将元素及其所有父级元素的高度设置为100%，并提供了一个简单的HTML和CSS示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

有时需要让一个盒子容器的 高度始终保持100%，无论怎么缩放浏览器高度始终不变。就像一些网站的侧边栏，但直接设置盒子容器的高度为100%是不起作用的。

在这里插入图片描述

demo

了解本专栏 订阅专栏 解锁全文
子元素div高度不确定时父div高度如何自适应
01-19
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题　1增加一个清除浮动，让父...
div+css 高度100% 绝对有用适应任何浏览器
09-06
div+css 高度100% 绝对有用适应任何浏览器
【CSS系列】height:100%设置div的高度
hellojoy的博客
04-10 5133
https://www.cnblogs.com/dream-to-pku/p/7372384.html 一、div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式，是无法成功显示100%高度的。这个是因为body高度默认值为自适应的，所以及时设置body第一个布局div高度为百分比也是无效的，因为div解析上级高度为0，自然div heig...
关于css的height:100%
drunk2的博客
06-27 257
摘要：问题排查发现弹窗时页面无法滚动，原因是全局CSS中设置了html和body高度为100%，导致视口高度固定。弹窗组件继承100vh高度，即使内容超出也无法滚动。解决方案是移除弹窗组件的h-[100%]属性，让高度由内容撑开，这样弹窗时页面即可正常滚动。关键点在于理解100%高度会继承视口高度而限制滚动。
如何使用 CSS 将 div 的高度设置为 100%
qq_25153359的博客
05-30 1004
将 div 容器的高度设置为浏览器窗口的 100%，它不起作用，因为百分比 (%) 是一个相对单位，因此结果高度取决于父级元素的高度。元素的高度也设置为100%，结果容器div的高度就等于浏览器窗口的100%高度。div 有两个父元素：例如，如果您考虑以下示例，如果您尝试使用样式规则。
css100%高度
ekinwei的专栏
04-15 964
在前端人员之间有一个普遍存在的问题，如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现，但是，我想出了一个我个人比较喜欢的方法。今天，我将于你分享一下。我对你是不了解的，但我试图弄明白如何让我的布局垂直拉伸到页面的100％高度，这样一个令我沮丧的问题。我想让div结构自动延伸，但是它就是不能自动延伸，现在，为什么他不能这样那？今天我将与你一起分享这个解决方
父级div高度由内容撑开 有三个 子div diaplay：flex后 三个盒子在同一行 中间的盒子的高度由内容撑开 我怎么让左边的盒子 和右边的 盒子的高度占满父盒子 。设置了height：100%没有效果
最新发布
07-18
如果确实需要手动设置高度，可以尝试设置左右盒子的高度为`100%`，但前提是父容器的高度不是`auto`（但这里父容器高度是auto）。在flex布局中，子项设置百分比高度需要父容器有确定的高度，而父容器高度由内容撑开...
当<el-card>的高度为100vh时，内部如果设置div标签的高度为100%，会使el- card的高度设置实效
04-03
在使用 Element Plus 的 `<el-card>` 组件时，如果你将其高度设置为 `100vh`，并希望其内部的某个 `<div>` 标签也充满这个高度，可能会发现 `<div>` 的高度无法完全生效。这是因为 CSS 百分比高度机制的作用。 --- ...
CSS-FAQ-height 100%
深度安全实验室
12-05 884
CSS-FAQ-height 100%
CSS 多种方法实现100%高度的容器
火星基地
06-23 1696
1. 百分比高度 html, body { height: 100%; } div { height: 100%; background-color: yellow; } 相对于父元素100%高度，所以父元素高度也要调整。 2. 相对单位 vh div { height: 100vh; background-color: yellow; } vh：相对视口高度的单位 vw：相对视口宽度的单位 100vh就代表高度占满整个窗口。 3. calc html, bo
CSS-div高度100%设置问题
weixin_33756418的博客
11-16 153
div常用的属性width和height，有的时候如果我们需要让div的高度是整个屏幕的高度，设置height：100%发现并没有什么作用，并不是这样设置不对，而是w3c规范中关于百分比的设置是相对于父元素的，如下所示: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF...
CSS设置div的高度为100%
admin_rdc
10-25 701
设置div的高度为100% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置div高度100%</title> <style type="text/css"> html,body{...
DIV设置高度height:100%
分享干货，拒绝水文
01-10 422
IE:body{height: 100%}Firefox:html,body{height:100%}这样设置后，body内的div的height的高度可以设置成100%。
设置div高度为100%
wr_mroo的博客
09-02 3300
直接使用如下代码设置div的宽度和高度时，div宽度会铺满屏幕，而高度为零。<div style="width:100%;height:100%"></div>原因：浏览器会直接计算窗口的宽度，作为容器宽度的缺省值。但是并不会计算窗口的高度，只是简单的向下堆砌。解决方法： 1.为该元素的所有父元素设置宽度为100%。<html style="height: 100%;padding: 0;marg
css高度100%(百分比高度)
weixin_30670151的博客
12-03 650
css的height属性可以设置100%，但是必须能得到父元素的高度。否则无效。 例如： #aa{background:red;height：200px;}#bb{height:80%;background:blue;}#cc{height:50%;background:green;} <divid="aa"...
CSS | CSS中height:100vh和height:100%的区别
热门推荐
青春木鱼的博客
06-15 1万+
1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%
css height 100%
fortunegrant的博客
10-17 493
一个很神奇的东西，body和html一定要设置成100%，然后父元素也要设置成100%才能实现，也就是要一层层下来全都设置成100%，有点弱智，然后如果父元素设置了position:absolute,top,bottom,left,right:0，heigth：100%又可以直接生效...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔡来了

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值