Question

我有一个固定的div嵌套在父div中。我希望固定的嵌套div是带填充的父div的宽度。我怎么能这样做呢？

<div class="panel">
   <div class="fixed">
   </div>
</div>

CSS：

.panel {
   width: 100vw;
   height: 100vh;
   padding: 10px 60px 10px 10px;
}

.fixed {
   position: fixed;
   width: inherit;
}

Answer 1

首先，固定位置和绝对位置之间存在差异，您想要的选项是绝对的，宽度为100％，如果想要将嵌套div设置为宽度，因为它的父div也是高度，那么嵌套div将被设置为position：absolute在这里你可以看到下面给出的示例中父级和嵌套div的颜色：希望这是你要找的......：）

.panel {
   width: 100vw;
   height: 100vh;
   padding: 10px 60px 10px 10px;
   background: red;
}

.fixed {
   position: fixed;
   width: inherit;
   background: yellow;
}

<div class="panel">
   <div class="fixed">
   </div>
</div>

Answer 2

如果没有为父级填充填充，但嵌套div的边距

，该怎么办？

.panel {
   width: 100vw;
   height: 100vh;
}

.fixed {
   position: fixed;
   width: calc(100vw - 70px);
   height: calc(100vh - 20px);
   margin:  10px 60px 10px 10px;
}

Answer 3

你缺少一些东西：

.panel {
 width: 100vw;
 height: 100vh;
 padding: 10px 60px 10px 10px;
 position:relative;
 background:red;
 z-index:9;

}

.fixed {
 background:green;
 position: fixed;
 width:inherit;
 height:inherit;
 z-index:99;

}

如果你希望它们位于另一个的顶部或后面，它总是一个很好的做法来区分包装div和子div与z-index，并且.fixed你没有给予身高：继承（或你想要多少）

https://jsfiddle.net/ishusupah/wmcw3w6o/1/

使一个固定div与父div相同的宽度和它的填充

3 个答案: