css - 空 div 需要是 100% 的父级

Question

我遇到了一个令人沮丧的问题……我以为我在这里找到了一些答案，但到目前为止似乎还没有任何效果。

这是一个开始的图像：

然后这里是html：

<section class="A">
  <aside class="B"></div>
  <header class="C">Title</header>
  <article class="D">Lorem ipsum...</article>
</section>

截至目前的CSS：

A{width:100%}
B{width:220px; height:100%; float: right; background= #fff url("foo") repeat}
C{width:450px}
D{width:450px}

我正在使用 wordpress（这个位是一个帖子），所以所有的内容都是自动生成的。我需要 div "B" 是父 div 的 100%。除了重复的背景图片外，它没有任何内容（网站是响应式的，这个 div 将在下一个断点处消失）。

我不能绝对定位它们，因为我不能给文章（“D”）一个固定的高度（至少我认为这种说法是正确的......）

任何人都可以帮助或将我指向可以的地方吗？最好是 CSS 解决方案，但此时 jQuery 也可以！

非常感谢²。

score 2 · Accepted Answer

我很确定您可以对 B 元素使用绝对定位，并指定要坚持的元素的 3 个边：

.A {
    position: relative;
}

.B {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 220px;
}

1 回答 1