时间戳

首页 > 解决方案 > 我可以让我的 div 从一个 div 继承高度和位置，从另一个 div 继承宽度吗？

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

问题描述

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

如果 CSS 可以选择说：

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

或类似的东西

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

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

标签： htmlcsssassbootstrap-4styling

解决方案

可以使用 . 强制 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>

我建议让你的outerdiv 全宽并给它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>

推荐阅读