Собственно вот страничка - http://liliana2.glina.net.ru/angela/html5/health.htmlПроблема заключается в том что таблицу (причем делала и таблицами и дивами - не помогает) нужно растянуть на 100% от шапки до подвала, вариант с абсолютным позиционированием не катит, ибо нужно чтобы была какая-то минимальная высота при которой сайт будет скролиться и не будет валиться вниз при этом и заезжать под футер | Код |
<body>
<div id="wrapper">
<table id="topnav">
<tr>
<td><div><a href="#" title="social"><span class="topmenutext"><img src="i/health_icon_lg.png" alt="" /></span><span class="splash"></span></a></div></td>
<td><div class="active"><a href="#" title="social"><span class="topmenutext">Body Weight</span><span class="splash"></span></a></div></td>
<td><div><a href="#" title="social"><span class="topmenutext">Blood Presure</span><span class="splash"></span></a></div></td>
<td><div><a href="#" title="social"><span class="topmenutext">Blood Sugar</span><span class="splash"></span></a></div></td>
<td><div><a href="#" title="social"><span class="topmenutext">Pulse & Oxygen</span><span class="splash"></span></a></div></td>
<td><div><a href="#" title="social"><span class="topmenutext">Breathing Test</span><span class="splash"></span></a></div></td>
<td><div><a href="#" title="social"><span class="topmenutext">Physical Activity</span><span class="splash"></span></a></div></td>
</tr>
</table>
<div class="br"></div>
<table class="health" width="100%" height="100%">
<tr>
<td id="graphics" rowspan="2"><div id="chartContainer" class="graphics" > </div></td>
<td id="results">
<div class="graphicsinfo">
<p>Average: <span id="average">94</span> (kg)</p>
<p>Last: <span id="last">11</span> (kg)</p>
<p>Time: <span id="time">12:00</span></p>
<p>Date: <span id="date">Jan 25 2011</span></p>
<p>Trend: Down</p>
</div>
</td>
</tr>
<tr>
<td class="healthdowmenu">
<ul>
<li id="month"><a onclick="monthClick()">Month</a></li>
<li id="week" class="active"><a onclick="weekClick()">Week</a></li>
<li id="all"><a onclick="allClick()">All</a></li>
</ul>
</td>
</tr>
</table>
<div id="mainnav">
<ul>
<li><a href="#" title="back"><img src="i/back.png" alt="back" /><span></span><img class="space" src="i/space.png" alt="" /></a></li>
<li><a href="#" title="loop"><img src="i/loop.png" alt="back" /><span></span><img class="space" src="i/space.png" alt="" /></a></li>
<li class="main"><a href="#" title="main"><img src="i/home.png" alt="back" /><span></span><img class="space" src="i/space.png" alt="" /></a></li>
<li><a href="#" title="question"><img src="i/quest.png" alt="back" /><span></span><img class="space" src="i/space.png" alt="" /></a></li>
<li><a href="#" title="alert"><img src="i/alert1.png" alt="back" /><span></span></a></li>
</ul>
</div>
</div>
</body>
|
Стили | Код |
body, html {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
background: transparent;
}
#wrapper {
min-height: 100%;
height: 100%;
position: relative;
min-width: 980px;
height: auto !important;
overflow: hidden;
}
.health {
min-width: 980px;
width: 100%;
background: transparent url(../i/healthdowmenu-fix.png) no-repeat 100% 100%;
margin-bottom: 49px;
}
.health td {
vertical-align: top;
position: relative;
}
#graphics {
width: 75%;
border-right: 1px solid #eeeff0;
background: blue;
}
#results {
width: 25%;
background: red;
}
.graphics {
width: 576px;
background: green;
}
.graphicsinfo {
padding: 31px 0 0 21px;
text-align: left;
color: #414142;
font: bold 24px 'Myriad Pro';
width: 314px;
}
.graphicsinfo p {
line-height: 160%;
}
.health td.healthdowmenu {
height: 42px;
}
.healthdowmenu ul {
list-style: none;
margin: 0;
position: relative;
}
.healthdowmenu ul li {
background: transparent url(../i/healthdowmenu.png) repeat-x 0 0;
float: left;
width: 33%;
height: 42px;
color: #fff;
font: bold 24px 'Myriad Pro';
padding-top: 8px;
}
.healthdowmenu ul li:first-child {
width: 34%;
}
.healthdowmenu ul li.active {
background: transparent url(../i/healthdowmenu-active.png) repeat-x 0 0;
}
.healthdowmenu ul li a {
color: #fff;
text-decoration: none;
}
|
|
html5/css3 Растянуть ребенка по высоте родителя, html5/css3 ребенка на высоте родителя 
Загрузка ...
