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

Question

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

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

如果 CSS 可以选择说：

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

或类似的东西

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

我想要的是div“.selectable”有一个div（内部？）悬停时显示并适合“.selectable”的高度（parent ) 和 body.

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

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

Can I make my div inherit height and position from one div and width from another?

html

css

sass

styling

bootstrap-4