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

问题描述

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

<div id="header"></div><div id="main"><div id="导航"></div><div id="内容"></div>

<div id="页脚"></div>

左侧是导航，右侧是内容div.内容div的信息是通过PHP拉进来的，所以每次都不一样.

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

解决方案

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

<小时>

我建议你看看 Equal Height Columns具有跨浏览器 CSS 和无黑客.

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

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

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>

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.

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?

解决方案

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

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

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.

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屋！