关于height无法设置百分比的问题

最新推荐文章于 2022-08-17 10:17:31 发布
最新推荐文章于 2022-08-17 10:17:31 发布
阅读量3.5k 收藏 4
点赞数
分类专栏： css 文章标签： 布局 class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22557797/article/details/66969443
版权
本文探讨了在CSS中，当父元素未设定高度时，如何通过设置子元素的padding实现百分比高度的自适应布局。介绍了通过给父元素添加padding和设置子元素position为absolute来解决问题的方法，并分享了一个左右比例自适应布局的实践案例。
摘要由CSDN通过智能技术生成

这篇文章不仅仅是关于高度设置百分比的相关知识，还涉及了自适应布局的问题，当然肯定不是全面讲解的，也仅仅是我项目中涉及到时采用的一些小技巧，所以也是难登大雅之堂了，大神就不用看了。免得贻笑大方。

完成之后的效果图如下

示例图片

<!-- 默认html布局 -->
<div class="c-grid">
    <a class="c-grid-item clearfix">
        <div class="c-grid-view-box pull-left">
            <img class="c-grid-view" src="images/demo.jpg" />
        </div>
        <div class="c-grid-info pull-left">
            <h3 class="c-grid-title ellipsis">示例项目</h3>
            <div class="c-grid-introduce">
                示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目
            </div>
        </div>
    </a>
</div>

众所周知，如果父级元素没有设置高度的时候，子元素如果定义高度为百分比的时候，是不会有任何作用的

最低0.47元/天 解锁文章
深谷逸风
关注
专栏目录
关于line-height设置的问题
qq_44812835的博客
09-08 2082
在平时做项目的时候，因为盒子高度使用的百分比，就想尝试行高也设置为100%，来实现这个垂直居中，但是效果并不会想我们想象的这样，今天就来重新认识一下行高 line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离 行高也是可以撑开容器高度的，当元素没有定义 height 属性时，元素表现的高度是由 line-height 决定的 我们一般常常用来把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中 经过简单的介绍，我们来..
Canvas中设置width与height的问题浅析
09-22
本文主要探讨了Canvas中设置`width`和`height`属性时可能出现的问题及其解决方案。 首先，Canvas元素在HTML文档中默认的宽度是300像素，高度是150像素。可以通过直接在`<canvas>`标签内设置`width`和`height`属性来...
HCJ1：页面高度设置为百分百
qq_44700366的博客
08-17 727
将html页面高度设置为100%
div高度百分比
11-07 4357
在用百分比的时候，一定要确定父亲节点的高度（宽度是同样的道理）； 比如： 如果给div2设置height:100%;,那么必须明确div1的高度，否则div2的100%，就无法确定，如果要充满整个浏览器窗口，那么就要设置所有的长辈节点都为100%， 比如： 如果想让div2设置100%达到充满整个浏览器窗口的效果，必须设置它所有的长辈节点为100%,也就是
html百分比设置高度的原理,css height百分比 css高度百分比使用教程
weixin_34514378的博客
06-04 1877
css height百分比 div css高度百分比使用教程，高度百分比使用CSS高度属性样式height实现。css百分比的height高度样式很少使用，CSS5建议也要尽量避免使用百分比高度属性设置。要让百分比高度生效，必须对象父级高度要设置固定，这样对象设置百分比height才会生效。CSS百分比实例，这里设置一个固定高度的DIV盒子，再对其内部放入一个DIV盒子设置百分比高度样式。为了观察...
Div高度的百分比问题
tterminator的专栏
08-17 1491
转载自http://blog.163.com/m13864039250_1/blog/static/213865248201391012657561/ 总结：Div设置高度为百分比的时候  则外层的元素必须指定height属性 1.简单 外层div xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" c
html高度为什么不能用百分比,为什么百分比高度不适用于我的div？
weixin_35060251的博客
06-16 739
使用CSSheight属性和百分比值CSSheight属性与百分比值一起使用时，将根据元素的包含块计算。假设你的body元素有height: 1000px。然后一个孩子height: 90%将获得900px。如果您没有为包含块设置显式高度(并且子项未定位)，那么具有百分比高度的子元素将无法继续，高度将由内容和其他属性确定。从规格：百分比指定百分比高度。百分比是根据生成的框的包含块的高度计算的。...
关于css中line-height(行高)设置无效的问题的解决方法
09-22
在CSS中，`line-height`可以设置为数字、百分比、长度值或关键字，如`normal`。 在给出的例子中，我们看到一个`<div>`元素被设置为`.head`，并有以下CSS样式： ```css .head { height: 100px; text-align: ...
vue中设置height:100%无效的问题及解决方法
12-29
在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效。 App.vue文件 [removed] export default { name: 'App' } [removed] <style> #app { font-family: '...
高度百分比生效的方法height:100%
weixin_30558305的博客
04-16 84
eight:100%这个概念是子节点相对于父容器而言；所以要让此属性生效，必要的一点就是：父容器必须具有具体的高度信息； 直接在<body>的子节点（如div中）写height:100%是不会生效的，因为此时<body>的高度是不确定的，默认是auto； 方法一 给从根的父容器到子容器的所有容器都设置好百分比高度信息 比如： <!DOCTYPE h...
html高度为什么不能用百分比,div高度百分比即使使用100perc html和body也不起作用(div height in percentage does not work even with ...
weixin_42653672的博客
06-16 239
div高度百分比即使使用100perc html和body也不起作用(div height in percentage does not work even with 100perc html and body)我想使用不依赖于其中项目的百分比来设置div height 。 我在屏幕顶部有一个固定的标题和一个居中的div。 但是以百分比设置高度不起作用。 只有当我在那里添加一些项目时才会放大。请帮...
设置height:100%无效的原因以及两种解决方法
小多的博客
01-04 2万+
原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%; </div> 解决方法一：设置父元素高度 html, bod
ConstraintLayout系列：设置高度百分比
知道这个有什么用？
05-08 3348
这个高度百分比是占父布局的百分比，要看具体代码的写法来定。要实现同一个效果，父布局不同，设置的值也不一样。 代码：app:layout_constraintHeight_percent="0.21"，使用如下： <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andro.
HTML给div设置百分比高度无效的解决方式
热门推荐
Royal
06-22 3万+
给div设置height:100%;<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>div高度</title> <style> *{margin:0;padding:0} .nav{ width:200px;
CSS布局与定位——height百分比设置无效/背景色不显示
Sparrowflying的博客
05-24 5346
CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式，一是固定像素如“100px”，一是百分比如“80%”， 使用百分比的好处是元素会按父元素宽高自动调节大小，有更好的自适应性， 但由于元素默认宽度有效，默认高度无效， 因此父元素为时width="100%" height="100%"，其高度设置是无效的，
让高度百分比，height:100% 生效的3种方法
kun_931013的博客
01-24 2396
转载地址：https://blog.csdn.net/huitoukest/article/details/51375345 核心原理； height:100%这个概念是子节点相对于父容器而言；所以要让此属性生效，必要的一点就是：父容器必须具有具体的高度信息； 直接在&lt;body&gt;的子节点（如div中）写height:100%是不会生效的，因为此时&lt;body&gt;的高度是不确定的...
HTML中的高度设置为百分数的问题
yzn77的博客
10-21 5477
初学HTML，其中有这样一个例子： 菜鸟教程(runoob.com) table,td,th {     border:1px solid black; } table {     width:100%; } th {     height:50px; } Firstname Lastname Savings
HighCharts柱状图显示百分比
joyfixing的博客
09-24 1万+
HighCharts柱状图没有提供显示百分比的API，只有饼图和堆叠柱状图能显示，调用接口是this.percentage。普通的柱状图想要在柱状图上面显示百分比需要调用formatter格式化输出百分比。
line-height如何设置
最新发布
05-18
line-height（行高）可以通过以下方式设置： 1. 使用绝对单位，如像素（px）或点（pt），例如： ``` p { line-height: 20px; } ``` 2. 使用相对单位，如em或rem，例如： ``` p { line-height: 1.5em; } ``` 3. 使用百分比，例如： ``` p { line-height: 150%; } ``` 4. 使用数字，表示基于字体大小的倍数，例如： ``` p { line-height: 1.5; } ``` 需要注意的是，在设置行高时，应该考虑到字体大小、文本内容和布局等因素，以确保最佳的阅读体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值