父元素设置min-height子元素设置100%问题

最新推荐文章于 2022-11-21 13:09:15 发布
最新推荐文章于 2022-11-21 13:09:15 发布
阅读量1.3w 收藏 5
点赞数 1
分类专栏： PC端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/www93111/article/details/78115758
版权

父元素设置min-height子元素高度设置100%取不到值，这是因为子元素 div设置 height:100%；只有当父级元素满足min-height:1000px;设置的条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的.

解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算

轻风吹斜阳
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
min-height:100%；没有效果
wei_dan1129的博客
04-14 2221
父元素设置min-height子元素高度设置100%取不到值，这是因为子元素 div设置 height:100%；只有当父级元素满足min-height:1000px;设置的条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的. 解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算 .index-wrap{ background: rgba(0, 0, 0, 0.03);
equal-height-borders:Bootstrap列上的等高边框
05-01
由于Flexbox的特性，子元素的总高度会自动调整以填充整个容器，这将确保边框在同一高度。 3. **边距补偿**：由于边框占据了一部分空间，可能会导致内容区域内部的垂直间距不均匀。为了解决这个问题，可以使用负的`...
【CSS篇】父元素设置min-height，子元素height 100%失效问题
章魚尐芄子的博客
07-08 4718
当父元素设置了min-height，子元素设置height为100%，此时子元素的height 100%失效
关于父元素设置min-height，子元素设置 height 100% 不生效的问题
热门推荐
左不言的博客
10-15 1万+
<div class="container"> <div class="child"></div> </div> <style> .container { min-height: 100px; border: 1px solid; } .child { height: 50%; background: red; } </style&gt.
父元素设置min-height，子元素height 100%失效问题
打工人
11-21 2771
父元素设置min-height，子元素height 100%失效问题
关于min-height:100%
qq_40276992的博客
07-10 2038
有时候min-height:100% 设置了但是还是无法撑起页面，这主要是100% 是基于父元素的，父元素的高度的是一个固定值 html{ height:100%; } body{ min-height:100%; } 这样是可以让body撑起来的 所述 html 和 body 元素是不同的块级实体，在父/子关系。 html尺寸由浏览器窗口控制。 该 html 元素具有（默认情况下） overflow:auto，导致在需要时显示滚动条。 所述 body 元件是（默认） position
CSS子元素跟父元素的高度一致的实现方法
11-19
在CSS布局中，确保子元素的高度与父元素保持一致是一个常见的需求，特别是在设计响应式页面或需要内容填充两侧布局时。本篇文章将详细介绍如何通过绝对定位的方法实现这一目标。 首先，我们要理解绝对定位...
Div设置最小宽度(有浮动元素或浏览器宽度小于1350之后)
09-25
浮动元素（如 `float:left` 或 `float:right`）通常用于创建多列布局，但它们可能导致父元素的高度塌陷，即父元素无法正确包裹其内部的浮动子元素。为了解决这个问题，我们可以使用以下 CSS： ```css body { width...
CSS教程:弄懂闭合浮动元素
09-27
这样，这个额外的元素会清除浮动，使父容器的高度能够包含所有的浮动子元素。虽然这种方法兼容性极好，但需要额外的HTML标记，可能影响代码的简洁性。 2. 使用`:after`伪元素： CSS2.1引入了`:after`伪元素，允许...
IE下css常见问题总结及解决
12-13
子元素浮动后，父元素高度不会自动扩展。解决策略有添加额外的`clear:both`元素，使用`:after`伪类，使用`overflow`属性，或者浮动父元素。 7. **定义1px高度容器**： IE6不能很好地定义1px高度的容器。解决方法...
css3如何实现嵌套的未知高度布局（父元素使用min-height,子元素，以及子元素的子元素如何继承为100%）
LIUzhenjie_的博客
05-07 1894
需求为父元素高度不确定，子元素高度也不确定，但是父元素和子元素都有最小高度的要求，父元素和子元素的高度均需要根据子元素中的内容高度的变化而进行变化 首先需要给父元素加上min-height属性，同时加上display:flex属性，子元素不能设置高度，但是可以设置最小高度min-height，此时该值最小为父元素的最小高度，只有大于父元素的最小值时才会起作用，子元素高度默认为100% <!D...
CSS中min-height:100%问题
Poised_flw
03-19 4419
字面意思就是最小高度,高度的百分比继承于父元素大小.在多次嵌套的div中若里层需要使用min-height:100%.则其所有祖先元素都得设置*{ min-height:100%; height: 100%; } 如下面的实现过程: test min-height html,body{ height: 100%; margin: 0; pad
关于父元素min-height/postion:relative等，子元素设置 height 100% 不生效的问题
芳草萋萋鹦鹉洲哦
06-16 1206
解决办法 第一种： 父元素设置position: relative, 子元素设置 position：absolute 第二种： 给父元素加一层 box, 给 box 添加 flex 布局 第四种：给子元素添加 min-height inherit,这个的问题在于，如果父元素的高度比 min-height 高，子元素不会自动变高第五种：给父元素添加 display: flex; flex-direction: column; 子元素添加 flex: auto;这个问题在于，没法设置为50%的高度。第六种： d
CSS height=100%无效的解决方案
阿达King哥的博客
05-25 1627
去掉即可。
父元素设置了min-height, 子元素设置height:100%无效
pzy_666的博客
02-21 1670
参考文章 关于父元素设置min-height，子元素设置 height 100% 不生效的问题 css 父元素设置了min-height：100%, 子元素设置height:100%无效
min-height 无效
最新发布
06-09
min-height属性是用来设置元素的最小高度，但是它只在元素的实际高度小于指定的最小高度时才起作用。如果元素的实际高度已经大于或等于指定的最小高度，那么min-height属性就不会起作用。 如果你的min-height属性无效，可能是以下原因之一： 1. 元素的display属性设置为inline。min-height只对block-level元素有效，对于inline元素是无效的。 2. 元素的高度被父元素的高度限制了。如果父元素设置了固定的高度或min-height属性，并且子元素的高度超过了父元素的高度，那么子元素的min-height属性就无效了。 3. 元素的box-sizing属性设置为content-box。如果元素的box-sizing属性设置为content-box，那么元素的最终高度会加上padding和border的高度，这可能会导致元素的实际高度已经大于指定的最小高度，从而使min-height属性无效。 你可以检查以上原因并进行相应的调整以解决min-height无效的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值