на jsfiddle.net как то криво отображает, или у меня руки крюки.
Вот весь код.
Если открыть эту страничку все ок, если изменить окно по высоте
все плохо, если нажать F5 опять все хорошо.
Хочу ресайз по высоте без F5.
Если выбросить
<script>
var h=window.innerHeight||document.documentElement.clientHeight;
$(document).ready(function(){$("#oh").height(h -28)});
</script>
Все хорошо но нижнее меню налипает на контент.
Спасибо.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>PLC</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta name="viewport" content="user-scalable=no,width=device-width" /> <!-- Отключаем зум IPhone, IPade -->
<script>
var h=window.innerHeight||document.documentElement.clientHeight;
$(document).ready(function(){$("#oh").height(h -28)});
</script>
<script type="text/javascript">var wi=538;$(function(){$(".mw").width(wi-20);$("#m").width(wi);$(".fx").width(wi);$(".zz").width(wi);});</script> <!-- Делаем ширину в одной переменной -->
<style type="text/css">
body{background:linear-gradient(to top,#fefcea,#f1da36);background:-webkit-linear-gradient(top,#fefcea,#f1da36)}
#di_z{color:#fff;border-color:#aaaaaa;background-color:#444;height:100%}
#di_a{color:#fff;border-color:#aaaaaa;background-color:#ccc;text-align:center}
#m{margin:0 auto}
.fx{position:fixed}
.ft{top:-6px;z-index:2}
.fb{bottom:-6px}
.a,.i,.j{border-width:1px;border-radius:4px;color:#000000;border-color:#aaaaaa;background-color:#eee6CC}
.b,.i{width:45%;text-align:left}
.c,.j{width:22%}
.d,.k,.m,.n,.kx{text-align:center;width:100%}
.e,.k{border-width:2px;color:#fff;border-color:#aaaaaa;background-color:#3336CC}
.f,.m,.kx{border-width:1px;border-radius:5px;color:#fff111;border-color:#aaaaaa;background-color:#3336CC;cursor:default}
.g,.k,.m,.n,.q,.kx{border-style:solid}
.h,.n{border-width:2px;border-radius:5px;padding:1px}
.l,.k,.i,.j,.q{border-radius:5px}
.o,.kx{text-decoration:underline}
.p,.q{width:100%;height:100%}
.kk{background-color:#fff;border-color:#fff;border-width:1px;border-radius:5px}
#c{border-width:1px;color:#fff111;border-color:#aaaaaa;background-color:#fff6CC}
.kx{background-color:#828}
</style>
</head>
<body onselectstart="return false"><div id="m">
<!-- Верхнее меню Begin -->
<div class="fx ft"><table class="mw" align="center"><tr>
<td><table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><tr><td onClick="document.location='./status.html'">Статус</td></tr></table></td>
<td><table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><tr><td onClick="document.location='./setting.html'">Настройки</td></tr></table></td>
<td><table class="m" onMouseOver="className='kx'" onMouseOut="className='m'"><tr><td onClick="document.location='./help.html'">Помощь</td></tr></table></td>
</tr></table></div>
<!-- Верхнее меню End -->
<div id="oh">
<table><tr><td> </td></tr></table>
<table class="zz" cellpadding="12" style="height:100%">
<tr><td>
<table id="c" class="q"><tr><td align="center">
<table class="p d"><tr><td>
<table id="di_z" class="n"><tr><td>
Help content
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</div>
<!-- Нижнее меню Begin -->
<div class="fx fb"><table class="mw" align="center"><tr>
<td><table class="m"><tr><td>Copyright © 2014 PLC Systems, Inc.</td></tr></table></td>
</tr></table></div>
<!-- Нижнее меню End -->
</div></body></html>