Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Растянуть блок на 100% высоты ячейки таблицы


Автор: NDenis 29.5.2009, 16:26
В общем есть небольшой код таблицы:
Код

<table class="range_tbl"><!--Range-->
<tr>                                                 
<td class="range_td first" >
<div class="mwrap"> 
<div class="parf_pic"> <img class="marker sale_lider" src="/_i/sale_lider2.png" alt="Лидер продаж" /><img class="marker new2" src="/_i/new2.png" alt="Новинка" /><a href="/?action=product&id=2112&gid=2" title="Create Man">
<img  src="/_i/product/width85/prt_2112.jpg" alt="Create Man" />
</a>
</div>

<div class="desc">
<p class="name"><a href="/?action=product&id=2112&gid=2" title="Create Man">Create Man</a></p>
<p class="price">от&nbsp;480&nbsp;руб</p>
<p class="desc">Аромат, вдохновляющий творить......</p>
<a href="/?action=product&id=2112&gid=2" title="Create Man">
<img class="buy_butt" src="/_i/buy.png" alt="Купить" />
</a>
</div>
</div>
</td>                                                 
<td class="range_td" >

<div class="mwrap"> 
<div class="parf_pic"> <img class="marker sale_lider" src="/_i/sale_lider2.png" alt="Лидер продаж" /><a href="/?action=product&id=644&gid=2" title="Diavolo">
<img  src="/_i/product/width85/prt_644.jpg" alt="Diavolo" />
</a>
</div>

<div class="desc">
<p class="name"><a href="/?action=product&id=644&gid=2" title="Diavolo">Diavolo</a></p>
<p class="price">от&nbsp;310&nbsp;руб</p>
<p class="desc">Благородная композиция ароматов, построенная на контрасте средиземноморской свежести с тонкими нотка...</p>
<a href="/?action=product&id=644&gid=2" title="Diavolo">

<img class="buy_butt" src="/_i/buy.png" alt="Купить" />
</a>
</div>
</div>
</td>
</tr>
</table>

Код

.range_tbl td {
    border-bottom:1px dotted #636059;
    border-top:1px dotted #636059;
    height:100%;
    padding-bottom:7px;
    text-align:center;
    vertical-align:top;
    width:25%;
}
div.mwrap {
    height:100%;
        overfow:hidden;
    position:relative;
    width:100%;
}
.buy_butt {
    margin-top:0 !important;
        position:absolute;
        bottom:0;
        right:25px;
}

Задача растянуть div.mwrap на 100% высоты ячейки, чтобы кнопка купить была всегда внизу в независимости от количества текста. Проблема как раз в том, что высота ячейки тоже не известна.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)