带填充的100%宽/高绝对父对象
带填充的100%宽/高绝对父对象
提问于 2019-06-21 02:56:15
我的目标是拥有一个容器，用一些填充填充它的父容器，就像你在blow代码片段中看到的那样。现在，我唯一能想出如何做到这一点的方法就是使用calc()。从技术上讲，与flex相比，calc对浏览器的支持更好，所以我不想这么做。
有没有人能在没有javascript和calc()的情况下找到完成这个任务的方法呢？
假设所有宽度都是百分比。
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
width:calc(100% - 20px);
height:calc(100% - 20px);
left:10px;
top:10px;
}<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-21 03:21:42
只需像您一样使用top/left和right/bottom
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
right:10px;
bottom:10px;
left:10px;
top:10px;
}<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
你也可以考虑保证金：
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
right:0;
bottom:0;
left:0;
top:0;
margin:10px;
}<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56692259
复制相关文章
相似问题