Geek Answers Handbook

Css height 80% not working

I want my table to occupy 80% of the screen, but right now its size was only the size of the table.

#ecom-mainarea .center { margin-left: 10%; position: relative; width: 80%; height: 80%; /* when this is 500px it works fine, but % doesn't work */ border: 1px solid; border-bottom-color: teal; border-top-color: gray; border-left-color: gray; border-right-color: teal; background-color: white; voice-family: "\"}\""; voice-family: inherit; vertical-align: text-top; }
+4
source share
5 answers

You need to make sure that the html and body elements are 100% high. They need to stretch from top to bottom. If the html and body element will only be higher than your table.

Here you have a working sample:

 <!doctype html> <html> <head> <title>Table height</title> <style> html, body { padding: 0; margin: 0; height: 100%; } </style> </head> <body> <table style="background: cyan; height: 80%;"> <tr> <td> Table has 80% of the height of the body </td> </tr> </table> </body> </html>
+7
source

Works fine as long as you specify the height of the parent element (in absolute units)

+1
source

You can use a little hack. It uses positioning. See: http://jsfiddle.net/minitech/2vRrZ/

(Also, if you ever need vertical centering for multiple lines, that's how it's done. My invention, as far as I know)

+1
source

If I remember, percent is not supported for CSS heights. Must resort to other methods.

0
source

As a constructive suggestion, if you really do not want it to be a percentage, I suggest a fixed size for the table so that the layout looks the same on every computer, regardless of their resolution.

0
source

More articles:


All Articles