jquery - 使两个高度可调的列在主 div 内具有 100% 的高度

Question

我遇到了一个问题，我有一个包含两列的 div。我想要一个是灰色的，另一个是白色的。一个将有图像，另一个将有文本。我需要两者的高度都是 100%，但我很难弄清楚这一点。我现在设置它的方式是，一侧“结束”，另一侧继续拉伸(stretch) div。

我需要做什么才能让两列都延伸到 div 的底部？ “ind-product”是包含标签的主要 div，然后是 Logo (左列)和文本(右列)。这两者的内容并不总是相同。

我的 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% 的高度。我不明白这应该如何工作。

谢谢

Answer 1

宽度不能以 100% 给出，它们需要以像素为单位的特定高度，或者从内容中获取。