CSS div高度百分比和边距百分比
然后
我有一个百分比高度和边距的相对div。
<div class="a">
<div class="b"></div>
</div>
.a{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
}
.b{
position:relative;
background-color:red;
height:75%;
width:92%;
margin: 25% 4% 0 4%;
}
身高75％和前25％的身高应加起来为100％。但是，它不能覆盖父级的所有高度。
这就是我想要的：
这就是我得到的：
看到小提琴：http : //jsfiddle.net/hc3L7ynf/2/
佩尔西恩
棘手的位置
将固定位置更改为绝对位置可以更轻松地显示问题所在：
.a{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
border: 1px solid black;
}
.b{
position: relative;
background-color:red;
height:75%;
width:92%;
margin: 25% 4% 0% 4%;
}<div class="a">
<div class="b"></div>
</div>最简单的解决方法是在其上方添加一个高度为25％的类；或使用:: before会做同样的事情。
.a {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
}
.b {
position: relative;
background-color: red;
height: 75%;
}
.c {
height: 25%;
}<div class="a">
<div class="c"></div>
<div class="b"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS div高度百分比和边距百分比
- 2
如何在CSS中添加高度百分比的顶部/底部边距
- 3
标头中的CSS百分比宽度和高度
- 4
CSS DIV使用百分比
- 5
CSS百分比高度无效
- 6
CSS转换禁用高度百分比
- 7
CSS设置元素的高度百分比
- 8
使用百分比时css高度错误
- 9
CSS图像高度限制为父div高度。父级div的宽度和高度以百分比指定***
- 10
CSS图像高度限制为父div高度。父级div的宽度和高度以百分比指定***
- 11
CSS位置百分比
- 12
CSS PX到百分比
- 13
CSS位置百分比
- 14
CSS PX占百分比
- 15
CSS百分比行为
- 16
CSS累积百分比
- 17
元素百分比-CSS
- 18
基于 css 百分比的背景
- 19
CSS百分比和像素布局相结合
- 20
是否可以使用CSS设置按百分比设置的边距的最小值？
- 21
父级具有最小/最大高度时的CSS百分比高度
- 22
CSS-使用CSS的移动屏幕的百分比高度
- 23
CSS转换百分比（用于进度栏）
- 24
更少的css乘以百分比的变量
- 25
CSS百分比对齐问题
- 26
将CSS位置从百分比转换为像素
- 27
CSS百分比值高于100％
- 28
CSS选择器名称中的百分比
- 29
CSS问题，垂直对齐的百分比余量
我来说两句