[英]Make div take up remainder of space on the Y axis
I have a product template that looks like this: 我有一个看起来像这样的产品模板:
The html for it is: 它的html是:
<div id="product">
<div id="cont">
<div class="productPictures">
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
</div>
<div class="productNumber"> #123 </div>
<div class="productDesc">
<table>
<col id="col1" />
<col id="col2" />
<tbody>
<tr>
<td> Body Type: </td>
<td> Stratocaster </td>
</tr>
<tr>
<td> Body Wood Type: </td>
<td> Walnut </td>
</tr>
<tr>
<td> Weight: </td>
<td> 12.7 lbs </td>
</tr>
<tr>
<td> Thickness: </td>
<td> 1 inch </td>
</tr>
<tr>
<td> Routing: </td>
<td> Standard </td>
</tr>
</tbody>
</table>
<div class="productPrice">
$456.00
</div>
</div>
</div>
</div>
</div>
</div>
and the css: 和CSS:
#product {
background-position: left top;
border: 2px solid #2D0000;
background-color: #42533E;
width: 650px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px
}
.productNumber {
padding: 4px;
font-size: 35px;
color: #C9E0D0;
float: right;
text-shadow: 2px 2px 3px #252525;
}
.productPictures
{
float: left;
padding: 0px;
margin: 5px 0px 10px 0px;
width: 200px;
}
.productDesc{
padding: 5px 10px 5px 5px;
color: #FFFFFF;
font-size: large;
float: left;
width: 400px;
height: 100%;
}
.productPrice {
font-size: 25px;
color: #F4D582;
text-align: right;
font-weight: bold;
text-shadow: 2px 2px 3px #252525;
}
.productImage {
border: 2px solid #20281E;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
#col1{
width: 40%;
}
#col2{
width: 60%;
}
table{
width: 100%;
}
So what I would want is for the product description div to end up at the bottom so that the price would also end up at the bottom. 因此,我想要的是产品说明div的底部,以便价格也可以底部的底部。 I tried to set height to 100% but this did not have any effect.
我试图将高度设置为100%,但这没有任何效果。
Thanks 谢谢
And here is a working example . 这是一个可行的例子 。
relevant code: 相关代码:
#product {
...
position:relative;
}
.productDesc{
...
position:absolute;
bottom:0px;
right:0px;
}
First of all you need to set float:left
on the div with the id of cont
. 首先,您需要在div上设置id为
cont
float:left
。
You have elements inside that container floating left, but that container is not, therefore its height is not expanding to its content. 您在该容器内有一些元素向左浮动,但该容器没有,因此其高度不会扩展到其内容。
Then you can set the productDesc
div to be position:absolute
and bottom:0px
. 然后,您可以将
productDesc
div设置为position:absolute
和bottom:0px
。
Of course, this will mess with its relative positioning to the photos, which it currently has, but if you want it fixed to the bottom of the parent container, that's the only way. 当然,这会使其相对于当前照片的相对位置混乱,但是,如果要将其固定在父容器的底部,那是唯一的方法。 You can then set the
right:100px
or however much it needs to be horizontally positioned how you would like. 然后,您可以设置
right:100px
或需要水平放置的任意right:100px
。
Edit: 编辑:
Here's a working example: http://jsfiddle.net/citizenconn/hXSmK/ 这是一个工作示例: http : //jsfiddle.net/citizenconn/hXSmK/
This will work. 这将起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.