如何在不指定父级高度的情况下强制子级div为父级div的高度的100％? [英] How to force child div to be 100% of parent div's height without specifying parent's height?

问题描述

我有一个具有以下结构的网站:

I have a site with the following structure:

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

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

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

导航在左侧，内容div在右侧.内容div的信息是通过PHP提取的，因此每次都不同.

The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it's different every time.

无论加载哪个页面，如何垂直缩放导航使其高度与内容div的高度相同?

How can I scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?

推荐答案

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

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

我建议您看看等高列跨浏览器CSS且没有Hacks .

基本上，以与浏览器兼容的方式使用CSS做到这一点并非微不足道(但对于表而言却微不足道)，因此请为自己找到合适的预打包解决方案.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

此外，答案取决于您是否要100％的高度或相等的高度.通常，它是相等的高度.如果高度为100％，答案会略有不同.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

这篇关于如何在不指定父级高度的情况下强制子级div为父级div的高度的100％?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！