我有一个网站与以下结构:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。

我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?


当前回答

如前所述,flexbox是最简单的。 如。

#main{ display: flex; align-items:center;}

这将使所有子元素对齐到父元素的中心。

其他回答

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

来自:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

状态引导,但你不需要引导来使用这个。回答这个老问题,因为这对我来说很管用,而且似乎很容易实现。

这和我对这个问题的回答是一样的

这个技巧确实有用:在HTML部分中添加最后一个元素 具有明确的风格:兼而有之; < div风格= "明确:;" > < / div > 在此之前的所有内容都将包含在高度中。

我可能有点晚了,但我找到了一个周围的工作,可能是一个hack。 首先给父层一个弯曲和100vh的高度

就像这样:

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;/* Can be less depends on the container, basically this forces the element to expand */
}

注意:此答案适用于不支持Flexbox标准的旧浏览器。有关现代方法,请参见:https://stackoverflow.com/a/23300532/1155721


我建议你看看跨浏览器CSS的等高列,没有黑客。

基本上,以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单),所以请找到一个适当的预打包解决方案。

同样,答案也取决于你想要100%的高度还是相同的高度。通常都是等高的。如果是100%高,答案就略有不同。

如前所述,flexbox是最简单的。 如。

#main{ display: flex; align-items:center;}

这将使所有子元素对齐到父元素的中心。