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

Question

我有一个div(div1)在其他的div里面，现在我想让这个div和主体有同样的宽度(占据整个显示宽度)，但总是和它的高度和位置一样。现在我想让这个div和主体有相同的宽度（占据整个显示宽度），但总是和它的父节点（div2）有相同的高度和位置。我试过在这个div(div1)上使用position: absolute;。然后我可以

• 将 body 设置为 position: relative; 并让 div1 占用 100% 的宽度，但现在我无法让高度始终跟随 div2。
• 或者将父节点（div2）设置为位置：相对；然后让div1占据100%的高度，但现在我无法让它跟随body的宽度。

如果CSS能有这样的选项，那就太酷了。

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

或者类似这样的选项

JSFiddle与相关位。https:/jsfiddle.netHamleyburgerfqe5o46c1#&一起js=K02DaSO2nR。

• 我想要的是div".selectable "有一个div(里面？)，在悬停时显示，并适合".selectable"(父)的高度和整个主体的宽度。

额外的，也许是相关的信息：我使用Bootstrap和（Jinja2）模板。到目前为止，所有的div都是从我的基础模板中的一个包装容器(.main)中获取它们的基本宽度，我已经设置为(响应地)比body窄。如果我去掉.main div，我将不得不在许多单独的div上设置宽度。这可以解决这个问题（我可以让所有不是div1的div都变窄），但不会很DRY。我正在使用SASS，如果这有帮助的话。

Answer 1

可以使用以下方法强制一个div填充整个视口宽度 vw. 虽然有点奇怪。

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>