关于css中height高度（100%与auto）使用

最新推荐文章于 2023-12-11 18:07:22 发布
原创 最新推荐文章于 2023-12-11 18:07:22 发布 · 2.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了CSS中`height: auto`和`height: 100%`的用法。`auto`允许浏览器根据内容自动计算高度，常用于轮播图中调整视频高度。而`100%`则基于父元素的百分比高度，适用于需要填充整个容器的情况。理解这两种高度设置对于优化网页布局至关重要。

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

height：auto

默认情况下，浏览器会计算出实际的高度并填充

height：100%

基于包含它的块级对象的百分比高度

在使用百分比的高度不能填满时，可以设置高度为auto由浏览器自动计算出实际高度（轮播图中调节视频的高度）

为什么 height:100%会无效？
liuhao9999的博客
03-23 746
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。 原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto， 所以无法参与计算。 使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。 ...
CSS样式之width: auto 100%与height:100%
GeXueliu的博客
04-07 1034
1.Width（默认情况下为content box的宽度） width:auto 元素content+padding+border+margin=父元素的width <style> .parent { height: 400px; width: 400px; border: 1px solid black; padding: 10px 10px; }
CSS 高度(css height)
bytxl的专栏
11-17 2809
一、height高度语法   -   TOP 1、高度基本语法 Height:auto 设置高度自动 （通常默认高度是auto自动，自适用内容而增高，通常如果想高度自适应不用设置） Height:20px 设置高度为固定数值 2、CSS高度用法结构 #divcss5{height:50px} 设置了divcss5对象盒子高度为50px（像素） 3、height高
CSS之height: 100%和height: auto的区别
qq_44731369的博客
08-23 4074
height: auto —— 是指根据块内内容自动调节高度。 height:100% —— 是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。 例：随着窗口宽度的改变，导航栏的位置发生变化（大于700时为侧边导航栏，700到400之间为顶部水平导航栏，小于400为顶部垂直导航栏） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
CSS height auto 过渡
Future1994的博客
12-11 793
ps:可能有伙伴会问，呢上面的例子和height:auto有什么关系，需要注意。height的默认值就是auto;
CSS_高度自动过渡 auto height
小歪博客
06-28 1391
CSS_高度自动过渡 auto height
height:100%与height:auto的使用场景
sinat_41747081的博客
10-24 2264
html为： <div class="parent"> <div class="child"> <p class="title">title1</p> <p class="title">title2</p> <p class="title">title3</p> ...
深入理解CSS的height:100%和height:inherit之间的使用区别
09-25
在CSS布局中，`height: 100%` 和 `height: inherit` 是两个非常常见的属性值，它们分别用于设置元素的高度。虽然在许多情况下它们的效果相似，但存在一些关键的区别，尤其是在特定的布局环境中。 首先，`height: ...
vue中设置height:100%无效的问题及解决方法
10-18
浏览器并不会自动给这些元素添加固定高度，因此，当我们在CSS中给#app设置height:100%时，其父元素html和body的高度实际上是0px，所以#app元素的高度也就随之为0px。此时，高度设置的100%是相对于其高度为0的父元素...
CSS中width和height的默认值auto与%案例详解
01-18
height的%：基于包含它的块级对象的百分比高度，会突破父级的限制 height的auto：尽量被父级包裹 案例 一定复制代码跑一遍，花几分钟体会一下尽量被父级包裹与突破父级的限制 width案例 <!DOCTYPE html> <...
CSS设计网页小技巧 100%的高度
09-25
若想让元素的高度能够占满整个浏览器窗口，一个直观的想法是在CSS中设置这个的高度为100%。然而，实际上，仅仅给设置"height: 100%;"并不会让它延伸到整个视窗的高度，因为其父容器和的高度默认情况下并不会占满整个...
CSS | width、height中auto与100%与固定值有什么不同
weixin_42398560的博客
03-15 744
由于多次在设置width及height处出错导致不显示，总结了一篇固定值与auto、100%的差别，举例对比部分有基础的同学可以略过直接看总结。 总结： （1）width、height使用固定值是一定会显示的，但是除非是小型项目或是特殊情况，最好不要使用固定值。不利于响应式开发，当从移动端看页面就会非常不美观。 （2）不设置width、height时默认为auto，当position不同时显...
谈一谈css中的100%和auto
firewhitwind的博客
09-06 1952
在web前端的编程过程中，利用%数值和auto来进行设置元素的宽度和高度等是很常见的，但是他们的值是怎样计算的呢？
获取一个height设置为auto的元素的实际高度
CherryCola_zjl的博客
04-11 5035
jq $("#box")[0].offsetHeight js document.getElementById("box").offsetHeight 这两个方法是没问题的，但我在项目中遇到了问题。 我要获取隐藏元素iframe中，一个height为auto的元素高度。再将此高度赋给iframe，让高度适应。卸载iframe的load回调函数中，但是获取的高度始终为0。 但是...
css height:auto 不起作用,CSS Auto-height Div无法正确定位
weixin_42162978的博客
08-04 545
我正在尝试获得一个简单的页面布局，其中导航栏垂直位于用户窗口的右侧，占用的空间不超过20％。左边剩余的80％空间用于内容。我希望整个页面可以调整大小，因此无论浏览器窗口的大小(在合理范围内)，内容都会调整大小到用户的屏幕。一切正常并且调整大小很好，但是navBar存在一个问题。这是一个CSS摘录：body{background-color: #111111;font-family: Roboto;...
元素高度auto和100%
weixin_34392906的博客
02-16 136
height：auto时，高度会随内容高度而撑开 height：100%时，高度是根据父级元素高度来确定的 转载于:https://www.cnblogs.com/qianphong/p/10387718.html
BFC神奇背后的原理
qq_43288110的博客
09-26 372
一、BFC定义 　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 　　 二、BFC布局规则 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相...
关于高度
weixin_33674976的博客
07-22 180
height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。 转载于:https://www.cnblogs.com/wangbei2016/p/5694904.html...
css 设置高度100%背景
最新发布
12-11
在CSS中，要设置一个元素的高度为100%并设置背景，可以使用以下几种方法： 1. **使用百分比高度**： 要使一个元素的高度为100%，需要确保其父元素的高度也是已知的（即父元素的高度不是默认的`auto`）。可以通过设置`html`和`body`的高度为100%来实现。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Full Height Background</title> <style> html, body { height: 100%; margin: 0; } .full-height-background { height: 100%; background-color: #f0f0f0; } </style> </head> <body> <div class="full-height-background"> <!-- Content here --> </div> </body> </html> ``` 2. **使用视口高度（vh）**： CSS中的视口高度单位`vh`可以直接设置元素的高度为视口高度的百分比。例如，`height: 100vh;`表示元素的高度为视口高度的100%。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Full Height Background</title> <style> .full-height-background { height: 100vh; background-color: #f0f0f0; } </style> </head> <body> <div class="full-height-background"> <!-- Content here --> </div> </body> </html> ``` 3. **使用Flexbox布局**： 使用Flexbox布局可以使元素在父容器中垂直和水平居中，并且可以轻松地设置高度为100%。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Full Height Background</title> <style> html, body { height: 100%; margin: 0; } .container { display: flex; height: 100%; background-color: #f0f0f0; } </style> </head> <body> <div class="container"> <!-- Content here --> </div> </body> </html> ``` 这些方法都可以实现设置元素的高度为100%并设置背景，具体选择哪种方法取决于你的实际需求和布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值