min-height:100%；没有效果

最新推荐文章于 2024-05-17 10:23:27 发布
最新推荐文章于 2024-05-17 10:23:27 发布
阅读量2.2k 收藏 3
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wei_dan1129/article/details/124174262
版权

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

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

.index-wrap{
   
	background: rgba(0, 0, 0, 0.03);
    min-height: 100vh;
    min-width
最低0.47元/天 解锁文章
wei_dan1129
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
让IE6支持最小高度min-height、最大高度max-height的方法
09-25
在网页设计中，`min-height`（最小高度）和`max-height`（最大高度）是CSS3中非常实用的属性，它们允许元素根据内容自动调整大小，同时限制其高度的上下限。然而，这些属性在老旧的Internet Explorer 6（简称IE6）...
IE 6不支持min-height或max-width等属性的完美解决方案
09-25
这些方法虽然可以帮助我们在IE6中模拟`min-height`的效果，但请注意，它们并不是万无一失的，可能会与其他CSS规则产生冲突，或者在更复杂的布局中引入新的问题。此外，随着IE6的市场份额逐渐减少，开发者现在更多地...
父元素设置min-height，子元素height 100%失效问题
打工人
11-21 2765
父元素设置min-height，子元素height 100%失效问题
前端高度自适应 height和min-height 百分比 不生效原因
qlin_11的博客
08-13 1万+
前端高度自适应 情景 其实前端一般不去管高度，都是设置min-height，用来设置最小高度，其他时候就用理层的div来撑开就好了。但是当屏幕很大的时候，比如笔记本和台式显示屏的问题，在内容比较小的时候那么就撑不开了。 这个时候就需要获取屏幕大小也就是浏览器的大小，这里有两个思路，一个是使用**@screen来写两种样式，**在不同屏幕下有不同的样式。 另外还有一种就是，通过html height...
为什么min-height不生效
最新发布
文摘资讯
05-17 154
首先来看一段简单的网页代码，使用min-height控制最小高度为父节点的50%。<div class="container"> <div class="child"></div> </div> <style> .container { min-height: 100px; border...
关于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中min-height:100%问题
weixin_34349320的博客
03-19 544
字面意思就是最小高度,高度的百分比继承于父元素大小.在多次嵌套的div中若里层需要使用min-height:100%.则其所有祖先元素都得设置 *{ min-height:100%; height: 100%; } 如下面的实现过程: <!DOCTYPE HTML> <html> <head> <title&gt...
子元素浮动后，父元素设置的min-height会出现无效的情况。
qq_33203743的博客
09-14 1628
1：在父元素内添加一个空的子元素，设置clear:both清楚浮动； 2：在父元素后内容生成； parent:after{ content:” “; display:table; clear:both; }
父元素设置了min-height, 子元素设置height:100%无效
pzy_666的博客
02-21 1666
参考文章 关于父元素设置min-height，子元素设置 height 100% 不生效的问题 css 父元素设置了min-height：100%, 子元素设置height:100%无效
min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
09-25
在网页布局设计中，`min-height` 和 `min-width` 是两个非常重要的CSS属性，用于定义元素的最小高度和最小宽度。这两个属性允许我们在页面设计时确保元素至少占用一定的空间，即使内容较少，也能保持一定的视觉效果...
Web前端新人笔记之height、min-height的区别详解
09-24
这样，对于支持`min-height`的现代浏览器，它们会使用`min-height`，而对于IE6，则会使用`_height`，从而实现类似的效果。示例如下： ```css .test { min-height: 80px; /* for ie7+, firefox, chrome, safari, ...
CSS中height和min-height的区别
01-19
做为Web前端新人，需要了解height、...这就是 min-height 的效果演示。元素拥有一个默认的高度，当内容超出该默认高度时，元素的高度同时随内容而增加。 eg1: XML/HTML Code复制内容到剪贴板 <style>  .test{
很简单又很奇怪的vue css；使用min-height就不给我自动识别高度了。
m0_74132943的博客
10-14 354
但是这个%他就是不行啊；解决的方法就是......使用min-height就不给我自动识别高度了；以至于无法使用%来占据相关高度；在使用vue开发项目的时候；遇到一个很简单的css但是咧又很特别很奇葩吧；
关于min-height:100%的解决办法
ala9527的博客
02-20 509
　　前几天碰到一个问题，在用bs和jq2.2.0开发时，min-height设为100%在firefox和ie下没有起作用，先用css改了一下，但是min-height虽然是奏效了，但同时出现了其他css问题，千丝万缕，随后万能的js完美解决问题，简单粗暴。 　　首先说一下问题产生的原因：jq2+获取heigh没有兼容Ie，故height()不行。 　　查阅资料知：窗口的高度 　　...
解决父盒子设置min-heigth高度时给子盒子设置高度100%不起作用
yhlhelloworld的博客
07-27 358
只需要把父盒子内设置为flex布局就可以了，然后子盒子设置flex1。
关于父元素设置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不生效
qq_42434039的博客
11-14 2041
height="auto"和 height="680"一起用就可以实现最小和自动高度
将这段代码设置为根据页面大小自动调整高度 .log{ position: absolute; top: 5%; left: 20%; border: 3px solid black; width: 1000px; padding-left: 50px; min-height: 500px; border-radius: 5%; }
06-09
min-height: calc(100vh - 10%); border-radius: 5%; } ``` 其中，calc()函数用来计算高度值，100vh表示视口高度，10%表示顶部和底部的空白区域高度之和。这样就可以让日志框的高度自适应页面大小，同时保证顶部...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值