Question

我遇到了一个问题，我有一个有两列的div。我想要一个是灰色的，另一个是白色的。一个将有图像，另一个将有文本。我需要两者的高度都是100％，并且很难搞清楚这一点。我现在的方式设置，一方＆＃34;结束＆＃34;而另一方继续扩大div。

如果要将两列扩展到div的底部，我需要做什么？＆＃34; ind-product＆＃34;是包含标签的主要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％的高度。我不明白这是怎么回事。

由于

Answer 1

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

Answer 2

好吧，你可以在你的CSS上做到这一点

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

并将.ind-product中的高度更改为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/

Answer 3

您可以在页面加载时使用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

使两个可调高度的柱子在主div内具有100％的高度

3 个答案: