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>

可以在UI中隐藏和显示各种detail-row div，从而导致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

如果没有左栏需要增长和缩小以匹配右栏的背景，这个问题很难回答。例如，如果我试图给左列提供与右列相同高度的背景颜色或边框，我只需将该背景颜色赋予容器，然后在右列上应用不同的背景。这是我正在谈论的事情的小提琴。 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;
}

如果您遇到问题是您在此内容后面有浮动元素，并且不希望它们填充由较短左列创建的空白空间，那么您也可以将宽度和oveflow：auto应用于容器。 / p>

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

twitter bootstrap：2列容器，一侧可变高度，另一侧100％

1 个答案: