Screenshot:
I tried to display HTML with UIWebView for an iOS project, but as you can see from the above image, the TD is not fit to the screen's width. I tried the HTML source with a browser and it is working well, but in mobile it doesn't.
What do I need to make the table fit exactly to the screen?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
font: 9pt tahoma, sans-serif;
direction:rtl;
}
*
{
margin: 0px;
padding: 0px;
}
html, body
{
height: 100%;
}
#print-header {
width:95%;
margin:10px auto 10px auto;
/*
background-image:url('../../icon/logo.png');
background-repeat:no-repeat;
background-position:left top;
*/
}
#print-header table {
border-collapse: collapse;
border:0;
margin:10px auto 10px auto;
text-align: center;
width:100%;
/*border:1px solid black;*/
}
#print-header .key {
text-align: left;
}
#print-header .value {
text-align: right;
/*font-weight:bold;*/
}
#print-header th {
border:0;
text-align: right;
width:50%;
/*background:red;*/
}
#print-header td {
border:0;
}
#print-body table{
border-collapse: collapse;
border:1px solid black;
margin:20px auto 20px auto;
text-align: center;
width:200%;
white-space: nowrap;
}
#print-body thead {
font-weight:bold;
}
#print-body th{
border:1px solid black;
padding:2px;
}
#print-body td{
border:1px solid black;
padding:2px;
}
#print-footer {
text-align: center;
font-size:13px
}
#print-body #print-caption {
text-align: center;
font-weight: bold;
font-size: small;
padding: 40px 0 30px 0;
}
</style>
</head>
<body>
<div >
<table>
<tr>
<th rowspan="2" align=right><img border="0" src=".../img.png"></th>
</tr>
</table>
</div>
<div id="print-body">
<hr size="4px" style="background-color:black">
<table cellspacing="0" cellpadding="0">
<tr>
<td width="100%">ISSUE DATE</td>
</tr>
</table>
</div>
<hr size="4px" style="background-color:black">
<div id="print-footer">
<p>sassas<br>asassasa</p>
</div>
</body>
</html>
Try table witdh:100% and position:fixed
Related
I can't scroll down on my page, i have looked for the overflow property to change it from hidden to scroll but its still not working.
I hope someone can help me with this frustrating problem...
I have pasted all my css files in the overflow editor so you guys can see what is going wrong.
Here is my source code:
body {
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
overflow: scroll;
}
div.gallery1 {
border: 5px solid #2f354e;
border-radius: 10px;
width: 300px;
background: #17c;
}
div.table-title {
display: block;
max-width: 600px;
padding:5px;
width: 100%;
}
.table-title h3 {
color: #000;
font-size: 30px;
font-weight: 400;
font-style: normal;
font-family: Helvetica, arial, sans-serif;
text-transform: uppercase;
}
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
max-width: 600px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
th {
color:#D5DDE5;
background:#1b1e24;
border-bottom:4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size:23px;
font-weight: 100;
padding:24px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color:#666B85;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background:#4E5066;
color:#FFFFFF;
border-top: 1px solid #22262e;
}
tr:first-child {
border-top:none;
}
tr:last-child {
border-bottom:none;
}
tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
td {
background:#FFFFFF;
padding:20px;
text-align:left;
vertical-align:middle;
font-weight:300;
font-size:18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
/**********************/
body {
margin: 0;
padding: 0;
/* Location of the image */
background-image: url("http://kb4images.com/images/red-wallpaper-hd/37940982-red-wallpaper-hd.jpg");
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
h1 {
color: white;
}
p {
font-family: Impact, Charcoal, sans-serif;
font-size: 20px;
}
/**********************/
/*------Nav-------*/
header {
width:100%;
position: fixed;
}
header nav {
width:100%;
background:#2f354e;
}
.menu_bar {
display:none;
}
header nav ul {
overflow:hidden;
list-style:none;
margin: 0px;
padding: 0px;
}
header nav ul li {
float:left;
}
header nav ul li a {
color:#fff;
padding:14px;
display:block;
text-decoration:none;
}
header nav ul li span {
margin-right:10px;
}
header nav ul li a:hover {
background:red;
text-decoration: none;
color:#ffffff;
}
#media screen and (max-width:800px ) {
header nav {
width:150px;
height:100%;
left:-100%;
margin:0px;
position: fixed;
}
header nav ul li {
display:block;
float:left !important
}
.menu_bar {
display:block;
width:100%;
background:#ccc;
text-align:center;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
background:#2f354e;
color:#fff;
text-decoration:none;
font-weight: bold;
font-size:25px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.menu_bar span {
float:right;
font-size:30px;
}
}
/*--------End of the nav-------*/
/*-------- Generic styles-------*/
body{
overflow: scroll;
margin:0px;
font-family: sans-serif;
}
/*-------- Generic styles-------*/
body {
color: #fff;
}
footer {
background: #2f354e;
bottom: 0;
left: 0;
padding: 20px 0;
position: fixed;
right: 0;
text-align: center;
}
<!DOCTYPE html>
<html>
<title>test</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="favicon/popcorn-32.png">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/loader.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/filmtoevoegen.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/loader.js"></script>
</head>
<body>
<header>
<div class="menu_bar">
<span class="fa fa-bars"></span>test
</div>
<nav>
<ul>
<li><span class="fa fa-home"></span>Admin dashboard</li>
<li style="float:right"><span class="fa fa-sign-out"></span>Loguit</li>
</ul>
</nav>
</header>
<br>
<br>
<br>
<br>
<br>
<center>
<div class="gallery1">
<h3>Film toevoegen</h3>
</div>
<br>
<br>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Film:</th>
<th class="text-left">Sales</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">Genre:</td>
<td class="text-left">$ 50,000.00</td>
</tr>
<tr>
<td class="text-left">Film omschrijving:</td>
<td class="text-left">$ 10,000.00</td>
</tr>
<tr>
<td class="text-left">Datum van uitkomst:</td>
<td class="text-left">$ 85,000.00</td>
</tr>
<tr>
<td class="text-left">Datum uit bioscoop:</td>
<td class="text-left">$ 56,000.00</td>
</tr>
<tr>
<td class="text-left">Film draai dagen:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
<tr>
<td class="text-left">Zaal:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
<tr>
<td class="text-left">Film afbeelding:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
</tbody>
</table>
</center>
<footer>© Copyright test</footer>
</body>
</html>
Your footer is positioned with fixed position, that's why it is overlapping with your content of body.
In case of setting position fixed for header/footer, make sure to set padding of the body in top/bottom respectively.
So in this case setting the padding-bottom of the body to the height of the footer will make the content visible.
add below css line to your body tag.
body {
padding-bottom:58px; /* height of the footer */
}
you might need to reset the overflow-x to hidden html{ overfloq-x:hidden; }
I have a page which renders correctly in IE and Chrome, but not in Firefox. The result I want in all three browsers looks like this:
...but in Firefox, it looks like this:
The code I have so far is this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>My title</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin-left:50px;
margin-right:50px;
}
.title{
float:left;
font-size:x-large;
}
.right-aligned{
float:right;
font-size:smaller;
text-align:right;
}
table,tr,td,th {
border:1px solid black;
}
tr.clsTable {
background-color:lightgray;
}
td.tableContainer {
padding:0px;
}
table {
border-collapse: collapse;
}
td.spacer {
border-right:hidden;
}
table.clsSubTable {
border-top:0px hidden;
border-right:0px hidden;
}
td,th {
padding:3px;
}
th {
background-color:burlywood
}
.no-result{
position:absolute;
top:50px;
}
</style>
</head>
<body>
<div class="title">My title</div>
<div class="right-aligned">Right<br/>aligned</div>
<br/>
<div>
<table class="clsTable" width="100%">
<tr>
<th>Some heading</th>
<th>Some other heading</th>
</tr>
<tr class="clsTable">
<td>Some data</td>
<td>Some other data</td>
</tr>
</table>
</div>
</body>
</html>
What am I doing wrong, and what do I need to do to fix the Firefox problem, without "breaking" the current behaviour in IE and Chrome ("right-aligned" text maintains its relationship with the right edge of the table as the browser window is resized)?
This is a side-effect of misusing floats. The best solution is to use display:inline-block instead.
(jsBin)
.wrp {
font-size: 0; /* Prevent white-space between tags being rendered as text */
}
.title, .right-aligned {
display: inline-block;
}
.title {
width: 75%;
font-size:x-large;
}
.right-aligned {
width: 25%;
font-size: 10pt;
text-align:right;
} body { font-family: Arial, Helvetica, sans-serif; margin-left:50px; margin-right:50px; } table,tr,td,th { border:1px solid black; } tr.clsTable { background-color:lightgray; } td.tableContainer { padding:0px; } table { border-collapse: collapse; } td.spacer { border-right:hidden; } table.clsSubTable { border-top:0px hidden; border-right:0px hidden; } td,th { padding:3px; } th { background-color:burlywood }
<div class="wrp">
<div class="title">My title</div>
<div class="right-aligned">Right<br/>aligned</div>
</div> <div><table class="clsTable" width="100%"><tr><th>Some heading</th><th>Some other heading</th></tr><tr class="clsTable"><td>Some data</td><td>Some other data</td></tr></table></div>
some browsers don't support some CSS3 stuff. -moz- usually does the trick.
lets say firefox doesn't support a margin-right in CSS. You can say -moz-margin-right: 40px;
I'm adding a new 'News Container' to a slightly older webpage at our firm.
This container is made up of a 2x3 table. I want the Cell 2x2 to be as High as the Text.
Here's the Problem:
Everybody uses IE in our offices (Security reasons etc.) but for some reason IE ignores the height attribute given either directly in HTML (style="height:;" or height="") or in a separate CSS.
So in Chrome it looks like this (how it should):
╔════════════════╗
╠══╦═════════════╣
║ ║Test String ║
║ ╠═════════════╣
╚══╩═════════════╝
And in Internet Explorer like this:
╔════════════════╗
╠══╦═════════════╣
║ ║Test String ║
║ ║ ║
║ ╠═════════════╣
╚══╩═════════════╝
Picture: http://imgur.com/a/jQXhQ
View it yourself (Open in both Chrome and IE) here.
How can I get IE to use the Height attribute or alternatively is there a different way?
IE Version: 11.0.9600.17358
Update: 11.0.13
Code:
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td rowspan="2">
<img id="NewsAmpel" alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status: </b>Test String</td>
</tr>
<tr>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
i have made some changes in html as well as CSS
Working Fiddle
http://jsfiddle.net/UzCRc/60/
HTML
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td id="NewsAmpel">
<img alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status: </b>Test String</td>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
</table>
CSS
#NewsAmpel{
width:36px;
}
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
#NewsTable {
border: 2px solid #000000;
background-color: #FFFFFF;
width: 100%;
}
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;
vertical-align: top;
display:block;
}
#NewsDesc {
height: 20px;
width: 100%;
margin:0;
padding:0;
display:block;
}
#NewsHeader {
text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #000000;
background-color: #FF1000;
}
Changes in html
Removed colspan
added image TD in same TR
Instead of image, ID has given to TD
CSS changes
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;//modified
vertical-align: top;
display:block;//added
}
#NewsDesc {
height: 20px; //added
width: 100%;//modified
margin:0;
padding:0;
display:block;//added
}
#NewsAmpel{
width:36px;
}
I'm trying to center a button inside the table by : text-align: center
However, it seems doesn't work for me.
Note: I used Display: table-cell combine with Vertical-align: middle to center the text of the button. As you can see the text of the first button "AAAAAAA" is in the middle.
Can someone help me to center the button without affecting the text of the button.
Thank you in advance.
Here's the example code:
http://codepen.io/anon/pen/pAcBx
I usually do
margin:auto;
display:block;
I guess #rhino answer works as well. Remember to remove
display:table-cell;
EDIT:
Keep in mind that doing this will get the a element content vertically centered, but if you also give the a element an arbitrary height, the surrounding background will not be centered.
Example 1: the text is vertically centered. But you set the button height to 32px and that surrounding container isn't:
table, tr, td{
border: solid;
}
.my_table {
width: 312px;
margin: 0 auto;
}
.dashed {
border-bottom:1px dashed #99F;
width:100%;
display:block;
position:absolute;
font-size:0;
top:43px;
}
/*BUTTON TABLE left CELL*/
.left_button_cell{
margin: 0 auto;
text-align: center; /*<---- NOT WORKING */
height: 50px;
padding-top: 10px;
line-height: 22px;
}
/*BUTTON TABLE right CELL*/
.right_button_cell{
text-align: center;
height: 50px;
padding-top: 10px;
line-height: 22px;
}
.inner_button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#fbfbfb;
-webkit-border-top-left-radius:8px;
-moz-border-radius-topleft:8px;
border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topright:8px;
border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-bottomleft:8px;
border-bottom-left-radius:8px;
text-indent:0;
border:2px solid #dcdcdc;
display:block;
margin:auto;
color:#939393;
font-family:arial;
font-size:15px;
font-weight:normal;
font-style:normal;
height:32px;
line-height:16px;
width:104px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
word-wrap:break-word;
vertical-align:middle;
}
.inner_button:hover {
background-color:#EBEBEB;
}
.inner_button:active {
position:relative;
top:1px;
}
<div class="dashed"></div>
<table class="my_table">
<tbody>
<tr>
<td class="left_button_cell">
<a class="inner_button" href="#">AAAAAAAA</a>
</td>
<td class="right_button_cell">
<a class="inner_button" href="#">BBBBBBBB BBBBBBBB</a>
</td>
</tr>
</tbody>
</table>
You could set the line-height to be also 32px, which would work for the first button, but the second one would break. Also, you could set a button padding of 6px to achieve the same result without declaring an explicit height (as css frameworks like bootstrap or materialize do) but the line break on the second button would result in uneven button sizes.
So, here's my suggested trick: set the a element line height to be 32px, then wrap its inner text in a span element where you reset the line-height to 16px:
table, tr, td{
border: solid;
}
.my_table {
width: 312px;
margin: 0 auto;
}
/*BUTTON TABLE left CELL*/
.left_button_cell{
margin: 0 auto;
text-align: center; /*<---- NOT WORKING */
height: 50px;
padding-top: 10px;
line-height: 22px;
}
/*BUTTON TABLE right CELL*/
.right_button_cell{
text-align: center;
height: 50px;
padding-top: 10px;
line-height: 22px;
}
.inner_button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#fbfbfb;
-webkit-border-top-left-radius:8px;
-moz-border-radius-topleft:8px;
border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topright:8px;
border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-bottomleft:8px;
border-bottom-left-radius:8px;
text-indent:0;
border:2px solid #dcdcdc;
display:block;
margin: 0 auto;
color:#939393;
font-family:arial;
font-size:15px;
font-weight:normal;
font-style:normal;
height:32px;
line-height:32px;
width:104px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
word-wrap:break-word;
vertical-align:middle;
}
.inner_button span {
line-height:16px;
display:inline-block;
}
.inner_button:hover {
background-color:#EBEBEB;
}
.inner_button:active {
position:relative;
top:1px;
}
<table class="my_table">
<tbody>
<tr>
<td class="left_button_cell">
<a class="inner_button" href="#">
<span>AAAAAAAA
</span>
</a>
</td>
<td class="right_button_cell">
<a class="inner_button" href="#">
<span>BBBBBBBB BBBBBBBB</span>
</a>
</td>
</tr>
</tbody>
</table>
EDIT 2019
You can achieve the same using flexbox. However, this means the border-spacing property does no longer apply so you need to do some fine tuning to the cell margins.
Basically, you set flex properties as:
.my_table tr {
display:flex;
}
.my_table td {
margin: 2px;
height: 60px;
display:flex;
flex-grow:1;
/* centering the button */
align-items:center;
justify-content:center;
}
.inner_button {
display:flex;
/* centering the text inside the button */
align-items:center;
justify-content:center;
/* plus the other properties */
}
With this you no longer need playing with spans, and the alignment of children is controlled explicitly.
table, td{
border: solid;
}
.my_table {
width: 312px;
margin: 0 auto;
}
.my_table tr {
display:flex;
}
.my_table td {
margin: 2px;
height: 60px;
display:flex;
flex-grow:1;
align-items:center;
justify-content:center;
}
.inner_button {
align-items:center;
justify-content:center;
display:flex;
width:104px;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#fbfbfb;
text-align:center;
border-radius:8px;
border:2px solid #dcdcdc;
color:#939393;
font-family:arial;
font-size:15px;
height:45px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
word-wrap:break-word;
}
.inner_button:hover {
background-color:#EBEBEB;
}
.inner_button:active {
position:relative;
top:1px;
}
<table class="my_table">
<tbody>
<tr>
<td class="left_button_cell">
<a class="inner_button" href="#">
AAAAAAAA
</a>
</td>
<td class="right_button_cell">
<a class="inner_button" href="#">
BBBBBBBB BBBBBBBB
</a>
</td>
</tr>
</tbody>
</table>
Anyway, once you switch to this layout there's no reason to stick to tables, and you might as well convert your layout to divs.
Change display: table-cell to display: inline-block:
.inner_button {
/* ... */
display: inline-block;
/* ... */
}
I added this to the TableCell and it centered my ImageButton. I think we were running into the same issue.
<asp:TableCell HorizontalAlign="Center" style="padding: 0px;">
<asp:ImageButton/>
</asp:TableCell>
Found my answer here: http://forums.asp.net/t/1418752.aspx?image+button+inside+table+cell
You can use the table-cell display property of the container div and set the vertical-align property to middle:
HTML
<div id="table">
<div class="row">
<div class="cell">
I'm your button
</div>
</div>
</div>
CSS
#table {
width: 300px;
display: table;
background: red;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
height: 200px;
background: yellow;
vertical-align: middle;
text-align: center;
}
You can find the fiddle here.
this works
td{
align:center;
}
simple and easy... hope it helps
Working to help a student with his project trying to get his Div to fill up the full body of the page.
I've tried following the various examples with HTML and BODY tag being set to 100% however when I set the minimum height for my Div it does not fill with the complete height of the page. Here is my code. When it renders the green should fill the page but it doesn't.
Thanks KT
<html>
<center>
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="tblwrap" height="100%">
<table class="scndtable" >
<tr class="headerrow">
<td height=100%>Summary </td>
<td>Map </td>
<td>Videos </td>
</tr>
</table>
</div>
<p style="font-weight: bold;text-align: center;"> </p>
</body>
</center>
Here is my CSS
html
{
height:100%;
}
body
{
margin:0;
padding:0;
vertical-align: middle;
height: 100%;
border: 20px solid skyblue;
}
body table
{
margin-left:auto;
margin-right:auto;
height:100%;
}
.tblwrap
{
background-color:green;
min-height: 100%;
vertical-align: middle;
border:solid 3px red;
}
.headerrow{
text-align: center;
}
.scndtable
{
border-spacing:20px;
height: 100%;
}
.headerrow td{
font-size: 20pt;
background-color:silver;
}
.headerrow td a{
text-decoration: none;
color: black;
}
.headerrow td a:hover{
text-decoration: none;
color: gray;
}
.selectednav
{
font-size: 72px;
font-weight: bold;
color:navy;
}
.tblwrap{position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:green;
vertical-align: middle;
border:solid 3px red;
oveflow:auto;
}
This will work for you:-)
It's always helpful to recreate your issue in JSFiddle before you ask your question on StackOverflow. I tried to recreate your particular problem, but in my case the div easily stretches the height of the viewport:
http://jsfiddle.net/hWGVr/
But as with Ankit Gautam's solution, this will always cover the height of the viewport, never stretching further