我可以让我的 div 从一个 div 继承高度和位置，从另一个 div 继承宽度吗？

Question

我在其他一些 div 中有一个 div (div1)。现在我希望这个 div 与 body 具有相同的宽度（占据显示的整个宽度），但始终具有与其父级 (div2) 相同的高度和位置。我试过使用 position: absolute;在这个 div (div1) 上。那我也可以

• 将主体设置为位置：相对；并让 div1 占据 100% 的宽度，但现在我无法让高度始终跟随 div2。
• 或将父级 (div2) 设置为 position: relative;并让 div 1 占据 100% 的高度，但现在我不能让它跟随身体的宽度。

如果 CSS 可以选择说：

.div1 {
height: 100%(.div2); 
width: 100%(body); 
position: 0(.div2); 
}

或者类似的东西

JSFiddle 与相关位：https://jsfiddle.net/Hamleyburger/fqe5o46c/1/#&togetherjs=K02DaSO2nR

• 我想要的是 div “.selectable” 有一个 div（内部？），在悬停时显示并适合“.selectable”（父级）的高度和整个身体的宽度。

额外的，也许是相关信息： 我正在使用 Bootstrap 和 (Jinja2) 模板。到目前为止，所有 div 都从我的基本模板中的包装容器 (.main) 中获取它们的基本宽度，我已将其设置为（响应地）比 body 更窄。如果我要删除 .main div 我必须在许多单独的 div 上设置宽度。那将解决它（我可以使所有不是 div1 的 div 更窄），但它不会很干燥。我正在使用 SASS，如果有帮助的话。

Answer 1

可以使用vw 强制 div 填充整个视口宽度。不过有点奇怪：

body,
html {
    margin: 0;
    padding: 0;
}

.outer {
    width: 300px;
    height: 300px;
    background-color: #eeeeee;
    margin: 0 auto;
    position: relative
}

.inner {
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div class="outer">
    <div class="inner"></div>
</div>

我建议您将outer div 设为全宽，并为inner 指定一个特定宽度：

body,
html {
    margin: 0;
    padding: 0;
}

.outer {
    width: 100%;
    background-color: #eeeeee;
    position: relative
}

.inner {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.1);
}

<div class="outer">
    <div class="inner"></div>
</div>