截图链接。

没有使用表格、flexbox和网格布局。仅使用浮动布局。

主块的高度取决于子块的内容，没有静态的子块高度。

如果可能的话，我需要在没有JavaScript/jQuery代码的情况下，拥有相同高度的左右块。有人有同样的问题吗？

我试图设置位置:绝对左侧块。但是内容不会在黄色块中延伸。我没有任何想法。

.card-wrapper {
  display: inline-block;
  border: 1px solid #ababab;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-family: Arial, serif;
  height: 100%;
  width: 100%;
}

.big {
  width: 66%;
  float: left;
}

.card {
  border: 1px solid black;
}

.card__header {
  width: 100%;
  background: green;
  height: 100px;
}

.card__main {
  background: yellow;
}

.card__footer {
  background: blue;
}

.gap {
  padding-top: 10px;
}

.right-col {
  width: 33%;
  float: right;
}

<div class="card-wrapper">
  <div class="card big">
    <div class="card__header"></div>
    <div class="card__main">
      Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
    </div>
    <div class="card__footer">
      Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
    </div>
  </div>
  <div class="right-col">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__main">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
      <div class="card__footer">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
    </div>
    <div class="gap"></div>
    <div class="card__little">
      <div class="card__header"></div>
      <div class="card__main">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
      <div class="card__footer">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
    </div>
  </div>
</div>