CODEWITHSUNDEEP
htmlcsshtml-table
misterkill38
misterkill38

Reputation: 72

HTML Table does not use full screen

Situation:

I'm writing an html page and I added a head and body. In my body I have 3 columns, left, main and right.

For this question only the main is important. I wanted to make a table with text in the main column. I only added 3 lines of text so the table is not completely filled, but still I want the table to be the full height of the screen, just to improve the look. Then it will be a lager box instead of a little box in the middle of the screen.

In my CSS file I have this:

    html {height:100%; width: 100%;}

    body 
    {
      margin:0; 
      height:100%;
      width: 100%;
      padding: 0;
      background-color: blue;
    }   

    #table1
     {
       background-color: black;
       height: 100%;
       width: 70%;
       z-index: 1;
       padding:15px;
     }

For some reason the height: 100% does not work. Does someone has an explanation?

Upvotes: 3

Views: 5838

Answers (3)

Optox
Optox

Reputation: 620

You must set the CSS height property of the entire main column to 100%, here, you are only setting the table height to 100% of the main div, which is not 100% of the screen.

Upvotes: 0

Laurent S.
Laurent S.

Reputation: 6946

You probably need to give your body a height of 100% too , cause your table is in your body, so when you tell the table to take 100% of the height, it's actually 100% of the body height , which is itself not 100%...

Upvotes: 1

sachleen
sachleen

Reputation: 31131

To make an element 100% height, you usually have to give the body and html 100% height as well.

Add

body, html { height: 100%; }

to your CSS.

You'll need to set the height of all elements in the hierarchy for this to work. Think of it as "100% of what? the element that is my parent." So what's that parent's height?

Demo

Upvotes: 4

Related Questions