Issue in my CSS code

Question

0.00/5 (No votes)

See more:

CSS

.PageLayout
{
    height:100%;
    width:100%;
}
.Header
{
    height: 20%;
    width: 100%;
}
.MiddlePanel
{
    height: 70%;
    width: 100%;
}


.Footer
{
    height: 10%;
    width: 100%;
}

Issue:
My page is not showing the complete width and height of 100%.

Posted 23-Jan-14 1:55am

riodejenris14

Add a Solution

Comments

Krunal Rohit 23-Jan-14 8:05am

and the HTML code ?

Karthik_Mahalingam 23-Jan-14 8:17am

post your html code..

Muhamad Faizan Khan 23-Jan-14 13:19pm

html please

2 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)

Krunal Rohit · Answer 1 · 2014-01-23T03:07:00

Why Percentage Height Fail?

If you're designing a web page, and you have a column that you'd like to take up the full height of the window, the natural inclination is to add a height: 100%; to that element. After all, if you set the width to width: 100%; the element will take up the full horizontal space of the page, so height should work the same, right?

Wrong.

To understand why, you need to understand how browsers interpret height and width. Web browsers calculate the total available width as a function of how wide the browser window is opened. If you don't set any width values on your documents, the browser will automatically flow the contents to fill the entire width of the window.

But height is calculated differently. In fact, browsers don't evaluate height at all unless the content is so long that it goes outside of the view port (thus requiring scroll bars) or if the web designer sets an absolute height on an element on the page. Otherwise, the browser simply lets the content flow within the width of the view port until it comes to the end. The height is not calculated at all.

The problem occurs when you set a percentage height on an element who's parent elements don't have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.

So, if you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined. In other words, if you have a page like this:

HTML

<html>
  <body>
    <div style="height: 100%;">
      <p>
        Make this division 100% height.
      </p>
    </div>
  </body>
</html>

The div that you want to give a 100% height to has two parent elements: <body> and <html>. In order to define the height of the div to a relative height, you must set the height of the body and html elements as well.

HTML

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        Make this division 100% height.
      </p>
    </div>
  </body>
</html>

src : here[^]

Deviprasad Das · Answer 2 · 2014-01-23T03:01:00

Solution 1

height: 100% will not work in all browsers.

You need to give
min-height: some px; let's say 600px;
height: auto; // so that the height will increase if it exceeds 600px;

Posted 23-Jan-14 3:01am

Deviprasad Das