Question

我有一个带有四个div的HTML布局：左上角，右上角，左下角和右下角。

示例：http://www.arkat-bayern.de/arkat-bayern.html

左上角的div是空的。它的宽度使用CSS width属性固定，其高度由右上角div的内容决定。我想设置一个左上角div的背景（或添加一个高度为100％的图像作为目前示例中显示的内容）。 Former discussions会产生一个建议，即必须指定空div的高度，但我无法应用该解决方案。

那么如何将空div设置为由相邻div确定的高？

Answer 1

您可以使用css设置背景图像，然后让它覆盖可用空间，如：

.top-left {
  background:url('/images/image-name.jpg') no-repeat;
  background-size:cover;
  background-position:center;
}

只要您设置了高度，这将有效。如果你无法弄清楚如何将高度设置为等于它旁边的div，你可以使用Jquery这样做：

$(function() {    
  var topRight = $('.top-right').height();
  $('.top-left').height(topRight);
});

始终确保在包含上述代码之前加载Jquery。

Answer 2

尝试将匹配高度js插件（https://github.com/liabru/jquery-match-height）用于id =＆＃34; Titelgrafik＆＃34;和id =＆＃34; obenlinks＆＃34;。然后应用CSS。

#obenlinks {
background:url('/images/image-name.jpg') no-repeat center;
}

Answer 3

这就是我现在基于答案的方式：

<script>
  $(function() {    
    var topRight = document.getElementById('topright').offsetHeight;
    document.getElementById('topleft').style.height = topRight + 'px';
  })
</script>

将背景添加到空div - 指定高度不可能

3 个答案: