製作兩列高度可調，高度均爲100％的高度

我碰到一個問題，我有一個有兩列的div。我想要一個是灰色的，另一個是白色的。一個會有圖像，另一個會有文字。我需要兩者的身高都是100％，並且很難弄清楚這一點。我現在設置的方式是，一邊「結束」，另一邊繼續延伸div。製作兩列高度可調，高度均爲100％的高度

我需要做什麼才能將兩列都擴展到div的底部？「ind-product」是包含標籤的主要div，然後是徽標（左列）和文本（右列）。這兩者中並不總是有相同的內容。

我的HTML：

    <div class="ind-product"> 
         <div class="ind-product-label">Label Goes Here</div> 
         <div class="ind-product-logos"> 
           <img src="/images/logos/1.png" /> 
           <img src="/images/logos/2.png" /> 
           <img src="/images/logos/3.png" /> 
         </div> 


           <div class="ind-product-list"> 
            <ul> 
             <li>Shovels</li> 
            </ul> 
           </div> 

        <div style="clear:both;"></div> 

        </div>

這裏是我的CSS：

.ind-product { 
width:308px; 
height:auto; 
float:left; 
background-color:#fff; 
border-radius:0px; 
margin:14px 20px 8px 0px; 
/*border:solid #000 1px;*/ 
color:#202020; 
} 



.ind-product-label { 
width:276px; 
height:50px; 
background-color:#ac1225; 
color:#fff; 
text-transform:uppercase; 
font-size:15px; 
text-align:center; 
padding:20px 16px 0px 16px; 
font-weight:bold; 
} 

.ind-product-logos { 
background-color:#CBCBCB; 
height:100%; 
width:150px; 
float:left; 
} 

.ind-product-list { 
height:100%; 
float:right; 
width:158px; 
} 

.ind-product-list ul { 
padding:0; 
margin:0; 
} 

.ind-product-list li { 
padding:14px 12px 0px 12px; 
list-style:none; 
}

我希望我的div中兩列，將達到100％的高度。我不明白這應該如何工作。

由於

來源

2014-06-12 user3734528

JSfiddle.net演示請。 –

寬度不能在100％給出他們需要以像素specefic高度或他們把它從內容。

來源

2014-06-12 14:58:34 gomzy

嗯，你可以在你的CSS這樣做

html, body { height: 100%; min-height: 100%; }

，改變你的.IND產品高度達到100％，所以它看起來是這樣的：

.ind-product { 
    width:308px; 
    height:100%; 
    float:left; 
    background-color:#fff; 
    border-radius:0px; 
    margin:14px 20px 8px 0px; 
    /*border:solid #000 1px;*/ 
    color:#202020; 
}

這裏是一個JSFiddle http://jsfiddle.net/E7r9y/

來源

2014-06-12 15:04:26 Reinaldo

您可以使用javascript來調整頁面加載時較小的列的高度：

$(function() { 
    var leftHeight = $('.left').css('height'); 
    var rightHeight = $('.right').css('height'); 

    // Set the height of one container to match the other. 
    // You could also compare both values to find the taller 
    // column first and then set the shorter one to match. 
    $('.left').css('height', rightHeight); 
});

http://goo.gl/DC02f5

來源

2014-06-12 15:19:04

製作兩列高度可調，高度均爲100％的高度

回答

相關問題