100% div height. I am confused!!

Question

Hi, I have been working on a dynamic page http://www.euroworker.no/order and I want my lovely rounded corners box (border-radius, not images) to fit over the generated products and ordrekommentar boxes.. This is dynamic so I have set the html, and parent element of this div to height:100%;, but it just extends to the bottom of the page..

Any solutions?

Thanks.

Answer 1

<div id="products">
    <div class="product">...</div>
    <div class="product">...</div>
</div>

#products
{
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    position: relative;
    height: 1%;
    overflow: hidden;
    padding: 10px;
}

You won't get the border-radius to work in IE but the box will extend dynamically to accommodate x amount of products in IE6+, FF, S, C & O

Answer 2

Pris Antall

        <tr class="even first"> 
    <td class="cartControl"> 
                    <a href="/order/delete/984?return=shop%2FBluetooth-headset.42">Slett</a> 
    </td> 

    <td class="cartImage"> 
                    <a href="/Plantronics-CS361N.11"> 
            <img src="upload/productimage/11-22-1.jpg?1249726571" alt="Plantronics CS361N" /> 
        </a> 
                </td> 

    <td class="cartName"> 
        <div> 
                                <a href="/Plantronics-CS361N.11">Plantronics CS361N</a> 
                            <small>(&rlm;Trådløse - duo)</small> 
        </div> 


                </td> 

    <td class="cartPrice discount"> 
                        11950.-
            <div class="subTotalCalc"> 
                5 x <span class="basePrice">2988.-</span><span class="actualPrice">2390.-</span> 
            </div> 
                </td> 

    <td class="cartQuant"> 
        <input name="item_984" class="text" type="text" value="5"/> 
    </td> 
</tr> 
<tr class="odd"> 
    <td class="cartControl"> 
                    <a href="/order/delete/997?return=shop%2FBluetooth-headset.42">Slett</a> 
    </td> 

    <td class="cartImage"> 
                    <a href="/Target-7050CC-Duo-UNC.7"> 
            <img src="upload/productimage/7-250-1.jpg?1251022192" alt="Target 7050CC Duo UNC" /> 
        </a> 
                </td> 

    <td class="cartName"> 
        <div> 
                                <a href="/Target-7050CC-Duo-UNC.7">Target 7050CC Duo UNC</a> 
                            <small>(&rlm;Med ledning - duo)</small> 
        </div> 

                        <div class="productOptions"> 

                                <div class="nonEditableOption"> 
                Skal tilkobles:
                                        Cisco
                                                    </div> 

            <div class="productOptionsMenu"> 
        <a href="/order/options/997" ajax="/order/optionForm/997">Endre valg</a> 
    </div> 
        </div> 

                </td> 

    <td class="cartPrice discount"> 
                        <span class="basePrice">1124.-</span><span class="actualPrice">899.-</span> 
                </td> 

    <td class="cartQuant"> 
        <input name="item_997" class="text" type="text" value="1"/> 
    </td> 
</tr> 
<tr class="even last"> 
    <td class="cartControl"> 
                    <a href="/order/delete/998?return=shop%2FBluetooth-headset.42">Slett</a> 
    </td> 

    <td class="cartImage"> 
                    <a href="/Sennheiser-MM-400.626"> 
            <img src="upload/productimage/626-984-1.jpg?1264593017" alt="Sennheiser MM 400" /> 
        </a> 
                </td> 

    <td class="cartName"> 
        <div> 
                                <a href="/Sennheiser-MM-400.626">Sennheiser MM 400</a> 
                            <small>(&rlm;Bluetooth headset)</small> 
        </div> 


                </td> 

    <td class="cartPrice discount"> 
                        <span class="basePrice">1938.-</span><span class="actualPrice">1550.-</span> 
                </td> 

    <td class="cartQuant"> 
        <input name="item_998" class="text" type="text" value="1"/> 
    </td> 
</tr> 

        <tr> 
    <td colspan="3" class="subTotalCaption"> 
                        Tilnærmet fraktpris:
                </td> 
    <td class="amount shippingAmount">124.-</td> 
    <div id="roundbigbox"> 
<td id="cartUpdate"><!--<input type="submit" class="submit" value="Oppdater" />--> 
<button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value="">&nbsp;</button> </td> 

</tr> 
        <tr> 
    <td colspan="3" class="subTotalCaption">mva:</td> 
    <td class="amount taxAmount">3600.-</td> 

</tr> 
    <tr> 
<td colspan="3" class="subTotalCaption">Totalt:</td> 
<td class="subTotal">18123.-</td> 

    <div id="eavContainer_556782" class="eavContainer"> 

                                                                                                                    <p class="required "> 
                            <label for="product___specField_6"><span>Ordrekommentar:</span></label> 
                            <fieldset class="error"> 

<div class="textarea" style="margin-left: 0;"> 
    <textarea id="product__708_specField_6" name="specField_6" class="tinyMCE"></textarea> 
    <div class="errorText hidden"></div> 
</div> 

                                                                    <div class="errorText hidden"></div> 
                            </fieldset> 
                        </p> 
                                                                                                                </div> 

CSS

roundbigbox {

padding:10px;
width:760px;
height:1%;
border-width:1px;
border-radius:10px;
border-color:#dddddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:-1;
position:relative;
overflow:hidden;

}