私はPHPで高度なデータベースマネージャーに取り組んでいます（基本的にダミー用のphpMyAdminで、管理者のみがテーブルを作成できるようにし、管理者はユーザーがデータを入力するためのフォームを作成します）。このアプリケーションのほとんどで、私は外観よりもバックエンドに関心があるので、コーディングを高速化するために jQuery-UI を借りてきました。
管理ダッシュボードを作成しているときに、問題が発生しました。jQuery-UI タブのデフォルトの実装を使用し、ui-tab-nav はページを垂直方向に埋めるように拡張しました。
エラーを次の CSS ルールまでたどりました。
#sidebar { float:left; }
これは私が持っているエラーを示しています:
$(function() {
$("#tabs").tabs();
});html,body {
height: 100%;
margin: 0;
padding: 0;
}
#sidebar {
float: left;
height: 100%;
width: 200px;
margin: inherit;
padding: inherit;
overflow: auto;
border-right: solid 1px #000;
}
#sidebar .menu {
margin: 10px;
padding: inherit;
list-style: none;
}
.title {
font-size: 1.5em;
font-weight: bold;
margin: inherit;
padding: inherit;
}
#sidebar .menu .nav-section {
font-size: 1.5em;
font-weight: bold;
border-bottom: solid 1px #000;
margin: 20px 0;
padding: inherit;
}
#content {
position: relative;
margin-left: 201px;
/* 200px width + 1px border */
padding: inherit;
}
#header {
margin: inherit;
padding: inherit;
background: #FF9;
}
#header label {
margin-left: 20px;
}
#myForm th {
background-color: #999;
border: 1px #000 solid;
}
#myForm td {
border: 1px #000 solid;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="sidebar">
<h2 class="title">DBManager: <em>Administrators</em></h2>
<ul class="menu">
<li class="nav-section">Forms</li>
<li><a href="?form=demos">Demos</a> - <a href="?form=demos&edit=1">Edit</a></li>
<li class="nav-section">Reports</li>
<li><a href="?report=school-copy">School Copy</a> - <a href="?report=school-copy&edit=1">Edit</a></li>
<li class="nav-section">Actions</li>
<li><a href="phpMyAdmin">phpMyAdmin</a></li>
<li><a href="?dashboard=1">Dashboard</a></li>
<li><a href="?logout=1">Logout</a></li>
</ul>
</div>
<div id="content">
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
</div>このルールをコメントアウトすると、jQuery-UI タブは正しく表示されますが、コンテンツ ボックス全体がサイドバーの下に押し出されます。オプション？