使浮动div有一个动态的100％高度

我使用PHP来动态创建网页。因此，我有更多的客观事物。我的通用页面创建一个标题，一个主体和一个页脚。内容是放置在我的主体内部。使浮动div有一个动态的100％高度

主体的最小高度为600px。
型主体内部的一个div一个页面作为上型主体左侧的菜单。我想这个div是主体高度的100％。
在div（菜单）是浮置的左，并且由PHP动态生成型主体内容的其余部分。

什么行不通：

高度：100％; （它只是最终被我有菜单，而不是型主体的高度内的内容的高度）
最小高度：600px的; （这只是停留600px的，即使型主体变大）
还没有发挥它就够了，但位置绝对的，荒谬的高度大，负Z指数，和型主体溢出......不与点点成功的我试过。

任何想法？只要看起来很自然，我完全可以做任何奇怪的操作。

这里的示例代码：jsfiddle.net/TButx

来源

2012-02-16 emilyk

厕所到使用JavaScript来获得当前屏幕的高度和当前元素的高度设置为所需的100％ – iGbanam 2012-02-16 22:15:55

你有没有代码，我们可以看到什么地方？如果我们可以看到它，这个问题的解决就更容易解决。如果您可以将该文件联机，则可以尝试使用JSFIddle http：// jsfiddle进行复制。净/ – azzy81 2012-02-16 22:17:19

http://jsfiddle.net/TButx/有你去！我希望菜单始终是主体的整个高度。 – emilyk 2012-02-17 00:51:04

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>

来源

2012-02-17 21:41:53

必须有在你的代码中的错误。正如你所描述的，一切都应该工作。喜欢这里：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;}

来源

2012-02-16 22:20:12 Faust

http://imgur.com/HpSbT这张图片显示了看起来正确的那个（使用#mainbody min-height：600px;内容不会让它变大）#menu height：600px;）http：// imgur .com/ZYR0h在这一个上，你可以看到高度不会延伸到被文本大小扩展的身体底部。 – emilyk 2012-02-17 00:41:38

http://jsfiddle.net/TButx/ – emilyk 2012-02-17 00:51:49

与一个常见的问题是，你的主体DIV不是在你的浮动元素包装。你必须有一个div与clear:both和身体div将拉伸。

作为另一种方法，可以用绝对位置来控制菜单div的拉伸。

对于主体DIV：

position:relative;

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

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

来源

2012-02-16 22:23:46 mowwwalker

使浮动div有一个动态的100％高度

回答

相关问题