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>

Answer 2

如果您使用table-cell代替position:absolute而不是{{1}}，则可以展开div。这是一个小提琴手。

http://jsfiddle.net/a6j2u3oz/1/

我会取出边缘和所有这些，并使用一个包含的div来做出那些位于身体上的变化，这样控制不断扩大的div高度是干净的。

Answer 3

您可以尝试在#container div中移动#navigation div，并在CSS中将#container的position属性更改为＆＃34; relative＆＃34;。

您必须稍微调整导航栏的位置，但是使用这些设置后，元素现在应该扩展到表格的高度。

http://jsfiddle.net/ben220/ovh14pm0/1/

HTML

<div id="container">
<div id="navigation">
navbar
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt       
ut labore et dolore magna aliqua. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt  
ut labore et dolore magna aliqua. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. <br/>
</div>

CSS

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

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

3 个答案: