Question

我正在使用php动态创建网页。因此，我有更客观化的东西。我的通用页面创建了一个标题，一个主体和一个页脚。内容放在我的主体内部。

主体的最小高度为600px。
主页内部的div为一页作为主体左侧的菜单。我希望这个div能够达到主体高度的100％。
div（菜单）向左浮动，其余主体内容由php动态生成。

什么行不通：

高度：100％; （它最终只是菜单内容的高度，而不是主体的高度）
最小高度：600px的; （它只保持600px，即使主体变大）
没有足够的玩，但是位置绝对，荒谬的大高度，负z指数，主体溢出......我试过的一点点没有成功。

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

以下是示例代码：jsfiddle.net/TButx

Answer 1

代码中一定有错误。正如你所描述的那样，一切都应该有效。就像这里：http://jsfiddle.net/VxSA3/

HTML：

<div id="Mainbody">
    <div id="menu">menu content</div>
    <p>some text in the main-body</p>        
</div>

CSS：

#Mainbody{height:600px;outline:1px solid green;}
#menu{height:100%;outline:2px solid red;float:left;width:100px;}

Answer 2

http://jsfiddle.net/TButx/56/

解决方案是填充色谱柱底部并隐藏溢出。

#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>

Answer 3

这是一个常见问题，你的主体div不会缠绕你的浮动元素。你必须在clear:both中加入一个div，并且body div会伸展。

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

对于主体div：

position:relative;

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

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

使浮动div具有动态100％高度

3 个答案: