html - 如何使元素匹配动态页面的高度

Question

在我的 CSS 中，我在侧面有一个导航栏和一个显示页面内容的容器。我让 php 输出了一个大数据表，我希望导航栏一直向下延伸到页面底部以匹配表的高度。

我该怎么做？我有以下代码，但当它是一个长页面时，导航栏与页面的高度不匹配(它在正常页面的大小处非常短)。

#navigation {
  position: absolute;
  width: 210px;
  height: 100%;
  margin: 0;
  margin-top: 100px;
  background-color: #F9F9F9
}
#container {
  position: absolute;
  padding: 0 20px 20px 0;
  /*top right bottom left*/
  margin-top: 100px;
  margin-left: 240px;
}

<div id="container">
  content
</div>

<div id="navigation">
  navbar
</div>

</body>

Answer 1

我会确保您的导航栏位于容器内。将容器设置为相对定位并将顶部、底部和左侧定位应用于导航。

这是一个例子... http://jsbin.com/ramoj/1/edit

#navigation {
  position: absolute;
  width: 210px;
  margin: 0;
  background-color: yellow;
  top: 0;
  bottom: 0;
  left: 0;

}

#container {
  position: relative;
  padding: 0 20px 20px 0;
  padding-left: 250px;
  background-color: green;
}

<div id="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet similique aspernatur consequuntur consequatur optio totam tenetur unde quo consectetur pariatur laborum officia numquam illum incidunt molestiae debitis possimus quis cupiditate!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet similique aspernatur consequuntur consequatur optio totam tenetur unde quo consectetur pariatur laborum officia numquam illum incidunt molestiae debitis possimus quis cupiditate!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet similique aspernatur consequuntur consequatur optio totam tenetur unde quo consectetur pariatur laborum officia numquam illum incidunt molestiae debitis possimus quis cupiditate!
  <div id="navigation">
    navbar
  </div>
</div>