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在这一点上也是不错的！

非常感谢²。

Answer 1

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

.A {
    position: relative;
}

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