День добрый
Пытаюсь делать сайт на базе JQuery + UI
Базовая разметка представляет собой
заголовок, после чего идет елемент Tab на всю оставшаюся часть страницы.
Примерно так
+-----------------------------------+
| Заголовок |
+-----------------------------------+
|tab1|tab2|tab3| |
+-----------------------------------+
| |
| содержание |
| |
| |
+-----------------------------------+
загрузка закладок по Ajax
Хочется что бы панель содержания имела автоматический размер до конца экрана, а в случае если содержание превышает размер, то была бы именно для этой панели полоса прокрутки.
Как это сделать есть идеи?
Хотябы что бы уж если содержание превышает рамер, то не уходила за границы экрана ...
<?php
header("Content-Type: text/html;charset=utf-8");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Метрика - Корпоративный портал</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/red/jquery-ui-1.7.2.custom.css" />
<style>
html, body {
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
border:0 none;
height:100%;
margin:0;
padding:0;
}
.toppan {
height: 93px;
font-family: Arial,sans-serif;
font-size: 3em;
color: #FFF200;
font-weight: bold;
}
/* .ui-tabs-panel {
height: 100%;
} */
#maintabscont {
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
overflow: auto;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
}
#maintabs {
/* don't need border or rounded corners - tabs 'fill' the pane */
padding: 0 !important;
border-top: 0;
border-left: 0;
border-right: 0;
padding-bottom: 0 !important;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script>
var Layout;
$(document).ready(function ()
{
// $Tabs = $("#maintabscont").tabs({spinner: 'Загрузка страницы ...', ajaxOptions: { async: false }});
$Tabs = $("#maintabscont").tabs();
});
</script>
</head>
<body>
<div class="ui-widget ui-widget-content " style="padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 0px; border: 0px" >
<div class="toppan ui-widget ui-widget-header ui-corner-top " >
<TABLE height="90px" cellspacing="0", cellpadding ="0" border='0'>
<TR>
<TD><a href="/"><IMG SRC="logo.gif" BORDER="0" ALT=" "></a></TD>
<TD width="100%" align="center">Корпоративный портал</TD>
</TR>
</TABLE>
</div>
</div>
<div style="padding-left: 5px; padding-top: 0px; padding-right: 5px; padding-bottom: 5px; overflow: auto;">
<div id="maintabscont" >
<ul id="maintabs">
<li><a href="#tabs-1">Главная</a></li>
<li><a href="fgoods.php">Товарная база знаний</a></li>
<li><a href="fempl.php">Соискатели</a></li>
<li><a href="fshops.php">Контроль магазинов</a></li>
<li><a href="fphoto.php">Фотоотчеты</a></li>
</ul>
<div id="tabs-1">
<p>Привествуем вас на корпоративном портале. Используйте закладки для перехода по раличным разделам сайта.</p>
</div>
</div>
</div>
</body>
</html>