html - 如何让左侧栏的高度与右侧栏的高度相等？

Question

在我的网页上，我希望我的侧边栏都向下延伸到页面底部，即使主要内容区域变长了。然而，事实并非如此。

#main {
}
#left {
    background-color: grey;
    height: 100%;
}
#right {
    background-color: yellow;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="main" class="row">
    <div id="left" class="col-sm-6 col-xs-6">
        <div id="sidebar">
            <p>Item 1</p>
            <p>Item 2</p>
            <p>Item 3</p>
            <p>Item 4</p>
            <p>Item 5</p>
        </div>
    </div>
    <div id="right" class="col-sm-6 col-xs-6">
        <div id="somethingLong">
            <div id="bigItem">
                 <h2> My big Car </h2>
            </div>
            <div id="bigItem">
                 <h2> My big house </h2>
            </div>
            <div id="bigItem">
                 <h2> My big Paycheck </h2>
            </div>
             <div id="bigItem">
                 <h2> My big mom </h2>
            </div>
        </div>
    </div>
</div>

如何让 left 至少与 right 一样长，或者最多到达页面底部？

Answer 1

如我的评论所述，要使列的高度相同，您可以使用 display: table; 或 flex。

这是一个使用 display: table 的演示。

#main {
  display: table;
}
#left {
  display: table-cell;
  background-color: grey;
}
#right {
  display: table-cell;
  background-color: yellow;
}

<div id="main" class="row">
  <div id="left" class="col-sm-6 col-xs-6">
    <div id="sidebar">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
      <p>Item 4</p>
      <p>Item 5</p>
    </div>
  </div>
  <div id="right" class="col-sm-6 col-xs-6">
    <div id="somethingLong">
      <div id="bigItem">
        <h2> My big Car </h2>

      </div>
      <div id="bigItem">
        <h2> My big house </h2>

      </div>
      <div id="bigItem">
        <h2> My big Paycheck </h2>

      </div>
      <div id="bigItem">
        <h2> My big mom </h2>

      </div>
    </div>
  </div>
</div>

注意: 这不是使用 Bootstrap 。

---

或者让列使用 while 页面使用 height: 100%;。

这是一个演示:

html,
body {
  height: 100%;
}
#main {
  height: 100%
}
#left {
  background-color: grey;
  height: 100%;
}
#right {
  background-color: yellow;
  height: 100%
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id="main" class="row">
  <div id="left" class="col-sm-6 col-xs-6">
    <div id="sidebar">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
      <p>Item 4</p>
      <p>Item 5</p>
    </div>
  </div>
  <div id="right" class="col-sm-6 col-xs-6">
    <div id="somethingLong">
      <div id="bigItem">
        <h2> My big Car </h2>

      </div>
      <div id="bigItem">
        <h2> My big house </h2>

      </div>
      <div id="bigItem">
        <h2> My big Paycheck </h2>

      </div>
      <div id="bigItem">
        <h2> My big mom </h2>

      </div>
    </div>
  </div>
</div>

注意: 由于高度为窗口大小的 100%，内容溢出。