如何强制子div为父div的高度的100％而不指定父级的高度？

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

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

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

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

导航位于左侧，内容div位于右侧。 内容div的信息通过PHP引入，因此每次都不同。

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

---

#1楼

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

---

我建议你看一下使用跨浏览器CSS和无黑客的Equal Height Columns 。

基本上，使用CSS以浏览器兼容的方式执行此操作并非易事（但对于表格而言是微不足道的），因此请找到适合您的预打包解决方案。

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

---

#2楼

[在另一个答案中提到Dmity的Less代码]我猜这是某种“伪代码”？

从我的理解尝试使用应该做的技巧的人造柱技术。

http://www.alistapart.com/articles/fauxcolumns/

希望这可以帮助 ：）

---

#3楼

如果您不介意在意外短的内容div中剪辑导航div，那么至少有一种简单的方法：

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

另外还有人造柱技术。

---

#4楼

这是一个令人沮丧的问题，一直与设计师打交道。 诀窍是你需要在CSS中的BODY和HTML上设置高度为100％。

html,body {
    height:100%;
}

这个看似毫无意义的代码是为浏览器定义100％的含义。 令人沮丧，是的，但这是最简单的方法。

---

#5楼

问题的标题和内容有点矛盾。 标题说的是父div，但这个问题听起来好像你想要两个兄弟div（导航和内容）的高度相同。

您是否希望导航和内容都是主要高度的100％，或者（b）希望导航和内容高度相同？

我假设（b）......如果是这样的话，我不认为你能够在你当前的页面结构（至少不是纯CSS和没有脚本）的情况下做到这一点。 您可能需要执行以下操作：

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

并将内容div设置为具有导航窗格宽度的左边距。 这样，内容的内容位于导航的右侧，您可以将导航div设置为内容高度的100％。

编辑：我完全在脑子里这样做，但你可能还需要将导航div的左边距设置为负值，或者将它的绝对左边设置为0以将其推回到最左边。 问题是，有很多方法可以解决这个问题，但并非所有方法都能与所有浏览器兼容。

---

#6楼

最简单的方法是伪造它。 List Apart已经广泛涵盖了这一点， 就像2004年Dan Cederholm的这篇