Html 使浮动div具有100%的动态高度

我正在使用php动态创建网页。因此，我将事情更加客观化。我的通用页面创建页眉、主体和页脚。内容放在我的主体里面

• 主体的最小高度为600px
• 一页的主体内部的div充当主体左侧的菜单。我希望这个div是主体高度的100%
• div（菜单）向左浮动，其余的主体内容由php动态生成

什么不起作用：

• 身高：100%；（结果是菜单中内容的高度，而不是主体的高度）
• 最小高度：600px；（即使主体变大，它也只能保持600像素）
• 我玩得还不够，但位置绝对，高度大得离谱，z指数为负，主体溢出……我尝试的一点点都不成功

有什么想法吗？我完全愿意做任何奇怪的操作，只要看起来很自然

---

下面是示例代码：

您的代码中一定有错误。正如你所描述的，一切都应该有效。 就像这里：

HTML:

---

一个常见的问题是主体div没有环绕浮动元素。你必须有一个

清晰的div：两个
和body div都会伸展

作为替代方法，您可以使用绝对位置来控制菜单div的拉伸

主体部分：

position:relative;

对于左浮动div（在这种情况下不再左浮动）：


解决方案是填充列的底部并隐藏溢出

#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}​

<div id="html">
<div id="mainbody">
    <div id="menu"></div>
    <div id="content"></div>
    <div id="clear"></div>
</div>
</div>​

#html{宽度：400px；高度：100%；左边距：自动；右边距：自动；背景色：黄色；}
#主体{最小高度：300px；高度：100%；溢出：隐藏；}
#菜单{宽度：100px；高度：继承；背景色：蓝色；浮动：左侧；填充底部：700px；边距底部：-700px；}
#内容{高度：100%；宽度：300px；背景色：红色；浮动：右侧；填充底部：500px；边距底部：-500px；}
#clear{clear:两者；}​
​
loo使用javascript获取当前屏幕的高度，并将当前元素的高度设置为所需的100%，您是否需要编写代码，我们可以在某处看到？如果我们能看到的话，这个问题就更容易解决了。如果你能把文件放到网上，你能用JSFIDLE复制它吗！我希望菜单始终是主体的完整高度。此图像显示的是看起来正确的图像（使用#main body min height:600px；并且内容不会使其变大。#menu height:600px；）在该图像上，您可以看到高度不会延伸到正文的底部，而正文的底部是文本的大小。
position:relative;

position:absolute;
left:0px;
bottom:0px;
top:0px;
width:...

#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}​

<div id="html">
<div id="mainbody">
    <div id="menu"></div>
    <div id="content"></div>
    <div id="clear"></div>
</div>
</div>​