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

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的演示。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意： 这不是使用bootstrap。

---

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

这是一个演示：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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