Menu
I want to make my table take up 80% of the screen, but right now its only the size of the content in 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;
}
695
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
This is caused by the default margin being 8px so redefining it using CSS will correct it.
The CSS height property applies to block level and replaced elements. When the value is provided as a percentage, it is relative to the height of the containing block.
CSS Demo: max-heightThis is a box where you can change the maximum height. This will limit how tall the box can be, potentially causing an overflow. max-height overrides height , but min-height overrides max-height .
You need to make sure that the htmland body elements have 100% height. They need to stretch from top to bottom. If not the html and body element will just be as high as 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>
Works fine so long as you specify a height of the parent element (in absolute units)
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
