css - twitter bootstrap : 2 column container with variable height on one side, 和 100% 在另一个

Question

我有一个容器，设置为 overflow-x: hidden;，其中包含一系列行。这些行被分成两列。随着右列内容的变化，左列需要能够增长和缩小。布局如下所示:

<div class="no-x-overflow">
  <div class="data-row container-fluid">
    <div class="left-column pull-left">
      <a href="#"></a>
    </div>
    <div class="right-column pull-left">
      <div class="detail-row1"></div>
      <div class="detail-row2"></div>
      <div class="detail-row3"></div>
    </div>
  </div>
</div>

各种 detail-row div 可以在 UI 中隐藏和显示，导致 data-row 收缩和扩展。 left-column div 需要能够执行相同的操作。我可以为各个部分的 height 赋予什么值，以使它们正常工作。

样式:

.no-x-overflow {
  overflow-x: hidden;
}

.data-row {
  overflow: hidden;
  clear: both;
}

.left-column {
  width: 10%;
  height: 100%;
  padding: 10px;
  border-right: 1px solid #999;
}

.right-column {
  width: 90%;
}

Answer 1

如果不了解为什么左列需要增大和缩小以匹配右列的上下文，这个问题很难回答。例如，如果我试图为左列提供与右列匹配相同高度的背景颜色或边框，我将只为容器提供该背景颜色，然后在右列上应用不同的背景。这是我正在谈论的 fiddle 。 http://jsfiddle.net/BY2Xh/1/

.data-row {
overflow: auto;
width: 100%;
position: relative;
background: yellow;
}

.left-column {
width: 10%;
box-shadow: 1px 0 0 solid #999;
float: left;
}  

.right-column {
width: 90%;
box-shadow: 0 0 0 1px red;
float: left;
background: green;
}

如果你的问题是你有跟随这个内容的 float 元素并且不希望它们填充由较短的左列创建的空白区域而不是你可以应用宽度和 oveflow: auto 到容器。

此外，如果您的宽度 %s 加起来为 100 并且您还有边框或填充，您的布局将无法按预期工作。您需要从那些内部 div 中删除填充，并且可以应用不占用 DOM 空间的带有框阴影的边框。