タブを作成するための次の HTML コードがあります。
<div id="content">
<div id="tabset">
<ul>
<li><a href="#panel1">Tab One</a></li>
<li><a href="#panel2">Tab Two</a></li>
</ul>
<div id="panel1">123</div>
<div id="panel2">456</div>
</div>
</div>
そして単純な JS コード:
$('#tabset').tabs();
それは動作します、すべてが良いです。ただし、問題は次のとおりです。「コンテンツ」IDのdivには「最小高さ」のcss値が600pxあり、タブのタイトル領域がすべての「コンテンツ」divを埋めます。どうすれば修正できますか?
すべての CSS:
body {
font: 10pt Arial, Helvetica, sans-serif;
background: #dcdcdc;
}
#container {
width: 800px;
margin: 0 auto;
}
#body {
min-height: 600px;
}
#header {
margin-top: 25px;
padding: 10px;
background: #ffffff;
}
#content {
margin-top: 25px;
padding: 10px;
background: #ffffff;
min-height: 600px;
position: relative;
}
#footer {
margin-top: 25px;
background: #ffffff;
padding: 10px;
}
.left-part {
float: left;
width: 50%;
}
.right-part {
height: 100%;
text-align: right;
vertical-align: middle;
}
table.align {
width: 100%;
border-spacing: 0;
}
table.align td {
width: 50%;
vertical-align: middle;
}
table.align td.right {
text-align: right;
vertical-align: middle;
}
table.bottom_table {
color: #000000;
font-weight: bold;
width: 100%;
border-spacing: 0;
}
table.bottom_table td {
vertical-align: top;
}
table.bottom_table a {
text-decoration:none;
color: #000000;
}
#copyright {
color: #8B8B83;
font-style: italic;
font-weight: bold;
}
#title {
font-size: 2.0em;
font-weight: bold;
}
#login {
font-weight: bold;
}
#about_project {
width: 25%;
}
#faq {
width: 25%;
}
#social {
width: 50%;
}
#sidebar {
background: #ffffff;
margin-top: 25px;
width: 220px;
min-height: 600px;
padding: 10px;
float: left;
}
#content {
margin-left: 260px;
}
table.align td.checkbox_cell {
width: 10%;
}
table.align td.department_cell {
width: 25%;
}
.sidebar-list {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.list-departments {
margin
}
p.vacancy-date {
margin: 0px;
padding: 0px;
}
p.vacancy-status {
margin: 0px;
padding: 0px;
}
#dialogg {
display: none;
}
/* New vacancy styles */
.vacancy-field {
width: 100%;
}
textarea.vacancy-textarea {
height: 200px;
}