Question

我有以下设置，

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>
#left{
  display: inline-block;
}
#right{
  display: inline-block;
  min-height: 800px;
  height: 100%;
}

我试图让容器成为左或右div较高的高度。但容器只是调整到#left div的高度？当左div的高度小于右div时，右div与页脚重叠（显然是由于最小高度）。有任何想法吗？

Answer 1

我认为最快的解决方案是使用display: table-cell代替。它会是这样的：

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

CSS：

#container {
  display:table;
    width:100%;
    border:1px solid red;
}
#container div {
    border:1px solid red;
    width: 50%;
}
#left{
  display: table-cell;
  background-color: lightgray;  
}
#right{
  display: table-cell;
  height: 100px;
  background-color: lightblue;
}

CSS水平调整div到子元素高度

1 个答案: