div height should be 100%

Question

0.00/5 (No votes)

See more:

XML

<td valign="top">
              <div class="round-corners">
                  <asp:ContentPlaceHolder ID="ParentContentPlaceHolder" runat="server">
                  </asp:ContentPlaceHolder>
              </div>
          </td>

CSS

.round-corners
{
    margin: 5px;
    border: 0px solid #fff;
    padding: 5px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ddd; /* Do rounding (native in Firefox and Safari) */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

I need to get height of the div 100% but it is growing based on data in Contentpalace holder
ie. if data in contentpalceholder is larger than screen size div is growing but when data in contentplaceholder is only one line div is showing small.

Posted 17-Jan-11 1:56am

karthikkushala

Updated 17-Jan-11 4:15am

Dalek Dave

v2

Add a Solution

5 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Hiren solanki · Answer 1 · 2011-01-17T02:08:00

Solution 1

Have you tried by applying following CSS attributes to .round-corners ?

CSS

Height:100%
Width : 100%

Try by it and let us know if you're facing any issue.

Posted 17-Jan-11 2:08am

Hiren solanki

Comments

Manfred Rudolf Bihy 19-Jan-11 16:17pm

Almost done now! 5+

Not Active · Answer 2 · 2011-01-17T02:09:00

Solution 2

And have you tried height: 100% ? You are also constrained by the table elements since this is in a table.

Posted 17-Jan-11 2:09am

Not Active

Martin Arapovic · Answer 3 · 2011-01-17T02:35:00

Solution 3

Hi,

I think you need to use min-height: 100%; css property...
Look this example, maybe this is what you are looking for: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html[^]

Posted 17-Jan-11 2:35am

Martin Arapovic

**Dalek Dave** · Answer 4 · 2011-01-17T04:19:00

Solution 4

As others have said height: 100% is ok, but be careful.
If you have other DIVs or Tables it may affect their layout too.

Having Nested Divs has unexpected results when you expand the place holders, and this is often exacerbated on different browsers or different resolutions.

Posted 17-Jan-11 4:19am

Dalek Dave

Yusuf · Answer 5 · 2011-01-17T04:46:00

Well think it this way, when you specify 100% you are talking relative. 100% of what? From your description the div is working as expected.

If you want to cover known space you will need to set Absolute hight. But that won't be fun, as it will mess up the design. A work around is to use javascript and set your height during the page load.

I'd similar issue, with iframe, not div. The work around is similar. Look at my solution below.

C#

// JScript File
$(function () {
    if ($.browser.safari || $.browser.opera) {
        // Start timer when loaded.
        $("#ttframe").load(function () {
            setTimeout(resizeAllIFrames, 0);
        }
        );
    }
    else {
        resizeIFrame();
        $("#ttframe").load(resizeIFrame);
    }
});
function resizeIFrame() {
    if ($.browser.safari || $.browser.opera) {
    }
    else {
        var ttfrm = $("#ttframe");
        var innerDoc = (ttfrm.get(0).contentDocument) ?
                    ttfrm.get(0).contentDocument :
                    ttfrm.get(0).contentWindow.document;
        ttfrm.height(innerDoc.body.scrollHeight + 35);
    }    
}
// Resize heights.
function resizeAllIFrames() {
    var ttfrm = $("#ttframe");
    var innerDoc = (ttfrm.get(0).contentDocument) ?
                    ttfrm.get(0).contentDocument :
                    ttfrm.get(0).contentWindow.document;
    ttfrm.height(innerDoc.body.scrollHeight + 35);    
}