css 父元素相对定位并设置padding 子元素宽度设置100
2021-11-25 本文已影响0人
Pino
QQ截图20211125085631.png
这个问题很好重现,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 100%;
}
.content{
width: 300px;
height: 300px;
border:2px red solid;
position: relative;
padding: 10px;
}
.bottom-view{
position: absolute;
bottom: 50px;
width: 100%;
height: 50px;
border:2px blue solid;
box-sizing: border-box;
}
.bottom-view>div{
height: 20px;
border:2px blue solid;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-1 {
flex: 1;
}
.flex-center {
align-items: center;
justify-content: center;
}
.flex-both-size {
justify-content: space-between;
}
</style>
</head>
<body>
<div class="content">
<div class="bottom-view flex-row flex-both-size flex-center">
<!-- <div>左侧盒子</div>
<div>右侧侧盒子</div> -->
</div>
</div>
</body>
</html>
网上找了很多 都没有找到点上，解决办法无非是设置 box-sizing: border-box; 一点用没有
只要父元素设置padding，子元素设置100% ，这个问题会一直存在
解决办法一
子元素宽度不要设置100% 而是继承父元素的宽度 即width: inherit;
image.png
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 100%;
}
.content{
width: 300px;
height: 300px;
border:2px red solid;
position: relative;
padding: 10px;
}
.bottom-view{
position: absolute;
bottom: 50px;
width: inherit;
height: 50px;
border:2px blue solid;
box-sizing: border-box;
}
.bottom-view>div{
height: 20px;
border:2px blue solid;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-1 {
flex: 1;
}
.flex-center {
align-items: center;
justify-content: center;
}
.flex-both-size {
justify-content: space-between;
}
</style>
</head>
<body>
<div class="content">
<div class="bottom-view flex-row flex-both-size flex-center">
<div>左侧盒子</div>
<div>右侧侧盒子</div>
</div>
</div>
</body>
</html>
拷贝到浏览器直接测试
