CODEWITHSUNDEEP
htmlcsscss-tables
User
User

Reputation: 1662

How to Set the div height as 100%?

I create the Empty Div. I try to give the height as 100% For that empty Div in style because I need to show the div in full page of browser screen, but Im not able to give the height as 100%. Is there any possible way to set empty div height as 100%?

  <div id="test">
        <div id="test1">

        </div>
    </div>

Upvotes: 0

Views: 791

Answers (3)

Arihant Godha
Arihant Godha

Reputation: 2459

You can try it by giving a min height in your css like

#test,#test1 {
min-height: 100%;

}

Upvotes: 1

Rohan Patil
Rohan Patil

Reputation: 2348

You can also use javascript for this

 var h = document.getElementById("mainContentID").offsetHeight;
 document.getElementById("menuID").style.height = h + "px";

Line 1 creates a new variable “h” and assigns this variable the height of an element found. This does not return the “height:” as specified in CSS, it returns the actual height of the document as it is displayed on the screen.

Line 2 fills the “height:” style value of the other, shorter, element with the variable h + “px”

Put this code near the end of your document, probably right before the body tag, and it will run right when the page loads. You could also wrap this in a jquery $(window).load, or even a $(document).ready. As it is, though, there is no library dependency – just plain-old-JavaScript!

Please check http://jsfiddle.net/BDEnM/

Upvotes: 0

talha2k
talha2k

Reputation: 25650

You have to specify height to parents/divs also, i.e.

#test, #test1
{
  height: 100%;
}

and if you want it to full screen you have to use it like this:

#test1, #test, body, html
{
    height: 100%;
}

Hope this helps.

Upvotes: 2

Related Questions