主要問題，100％高度的div

enter image description here 主要問題，100％高度的div

/* Left menu */ 
.leftMenu{ 
    width: 200px; 
    border:2px solid green; 
    float:left; 
    background-color:#c0c0c0; 
} 

/* Main Content area */ 
.mainBox{ 
    border:2px solid red; 
    background-color: #ffffff; 
} 
.mainWrapper{ 
    border:2px solid white; 
}

隨着

<div class="mainWrapper"> 
    <div class="leftMenu"> 
     left 
    </div> 
    <div class="mainBox"> 
     main<br /><br /><br /><br /><br /> 
    </div>   
    <div class="clear"></div> 
</div>

如何大火才能獲得左側菜單中的延伸到底部？

請注意我試過人造色譜柱，但他們只是不工作，因爲白色的主盒子只是在前面出於某種原因。

來源

2011-01-25 Tom Gullen

難道是正常的有指定`最小height`用於左欄？ – thirtydot 2011-01-25 12:12:57

是的，但這並沒有填充高度 – 2011-01-25 12:16:11

我有一個解決方案的想法，至少可以在IE7 +中工作，只要您可以在左列指定一個「min-height」。這聽起來可以接受嗎？ – thirtydot 2011-01-25 12:18:00

這是怎麼回事？

http://jsfiddle.net/PH3t2/

我已經添加postion:absolute，top:0和bottom:0您leftmenu

我已經給mainBox padding-left: 205px

我已經給mainWrapper position:relative

隨意添加內容到mainBox看到leftMenu也在增長。

要完成這個功能，並使其work in IE6，添加：

.leftMenu, .mainBox { 
    min-height: 250px; 
    height: auto !important; 
    height: 250px; 
}

來源

2011-01-25 12:21:19 Bazzz

您需要爲.mainWrapper設置固定高度，例如100px;然後你的.leftMenu設置高度爲100%;

編輯：根據您的意見，我不知道是否有可能與純CSS。如果它是一個可以接受的JavaScript解決方案，那麼你可以使用jQuery和下面的代碼：

$(document).ready(function(){ 
    $('.leftMenu').css("height",$('.mainWrapper').height()); 
});

活生生的例子：http://jsbin.com/udowu4/2

來源

2011-01-25 12:01:26 Sotiris

當使用人造列，您需要設置背景圖片.mainWrapper。

將.mainBox背景設置爲透明，並將.mainWrapper背景設置爲200px灰色左側，將所有其他寬度設置爲白色。

來源

2011-01-25 12:03:09 Olegas

CSS仿列可能是最好的解決方案。以下解決方案可能會起作用，但您可能會遇到其他問題。注意：無論哪一列較高，這都可以工作。

.leftMenu { 
 
    width: 200px; 
 
    float: left; 
 
    background-color: #C0C0C0; /* C0C0C0 is used for demonstration 
 
           ideally this should be same as the 
 
           border color used in the next style */ 
 
} 
 
.mainBox { 
 
    border-left: 200px solid #CCCCCC; 
 
} 
 
.mainWrapper { 
 
    border: 2px solid #000000; 
 
    background-color: #F8F8F8; /* this should be set to the color that displays 
 
           behind mainBox; its best to set it here in case 
 
           the left column becomes taller than main column */ 
 
}

<div class="mainWrapper"> 
 
    <div class="leftMenu">left</div> 
 
    <div class="mainBox"> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main<br> 
 
    main 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

來源

2011-01-25 12:34:02

主要問題，100％高度的div

回答

相關問題