使浮動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％高度

回答

相關問題