2
私は自分のページでJQueryのタブを使用しており、借用したCSS設定/スクリプトを使用してコンテンツの下にタブを配置することに成功しました。JQueryタブの下部に空白があります
マイページには左側にサイドバーがあり、ページ上部にメニューバナーがあります。コンテンツは、上部メニューバナーと下部のタブパネルの間に表示されます。
ページの下部に小さな空白があり、垂直スクロールバーが表示されています。私はこのスペース（とスクロール）を取り除き、専門家の助けが必要です。
私は、他の主要な要素に火薬爆弾や消去技術を使っていて、タブを紹介するときにスペースが表示されるだけなので、スペースは私のコンテンツのタブセクションによって引き起こされることは知っています。
CSSのパディング、余白、およびボーダー幅をゼロに設定しましたが、まだスペースが表示されています。ここで
は私のHTML、CSS、およびスクリプトです：
<head>
<title>Rfq</title>
<%= stylesheet_link_tag "rfq.css" %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "jquery-ui-1.8.10.custom.min.js" %>
<%= javascript_include_tag "rfq.js" %>
<%= csrf_meta_tag %>
</head>
<body>
<!--the top menu bar-->
<div id="rfq_menu_bar" class="ui-widget-header">Request for quote...</div>
<!--the side bar collapsed-->
<div id="rfq_side_bar_collapsed" class="ui-tabs-nav ui-state-active" >
</div>
<!--the tab panels-->
<div id=rfq_tabs_parent class="ui-widget-content">
<div id="rfq_main_tabs" class="tabs-bottom ui-widget-content">
<ul>
<li><a class="rfq_main_tab" id="items_tab" href="#rfq_items_panel">RFQ Items</a></li>
<li><a class="rfq_main_tab" id="reports_tab" href="#rfq_reports_panel">RFQ Reports</a></li>
</ul>
<div class="rfq_tab_content" id="rfq_items_panel">bob</div>
<div class="rfq_tab_content" id="rfq_reports_panel">jane</div>
</div>
</div>
</body>
そして、私のCSS：
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Verdana, Sans-serif;
font-size: 10px;
position: relative;
border-width:0;
}
#rfq_users_table_wrapper {
width: 100%;
left:0;
top:0;
position: absolute;
margin: 0;
padding: 0;
}
#rfq_menu_bar {
margin: 0;
padding: 0;
height: 8%;
font-family: Sans-serif;
font-size: 20px;
left:0;
width:100%;
border-width:0;
}
#rfq_side_bar_collapsed {
margin: 0;
padding: 0;
float: left;
height:92%;
width:2%;
border-width:0;
}
#rfq_main_tabs {
height:100% !important;
padding: 0;
margin: 0;
border-width: 0;
}
.ui-button-text
{
font-size: 10px;
}
#rfq_tabs_parent {
position:absolute;
left:2%;
width:98%; !important;
height: 92% !important;
z-index: -2000;
margin: 0;
padding: 0;
border-width:0;
}
#rfq_items_panel {
padding: 0;
margin: 0;
border-width:0;
}
#rfq_reports_panel {
padding: 0;
margin: 0;
border-width: 0;
}
.rfq_tab_content {
height:100% !important;
width:100% !important;
padding: 0;
margin: 0;
}
.tabs-bottom {
position: relative;
padding: 0;
margin: 0;
}
.tabs-bottom .ui-tabs-panel {
height: 120px;
overflow: auto;
}
.tabs-bottom .ui-tabs-nav {
position: absolute !important;
left: 0;
bottom: 0;
right:0;
padding: 0 0.2em 0.2em 0;
}
.tabs-bottom .ui-tabs-nav li {
margin-top: -1px !important;
margin-bottom: 3px !important;
border-top: none;
border-bottom-width: 1px;
}
.ui-tabs-selected {
margin-top: -3px !important;
}
マイJavascriptを：コンテンツの下部に
//体位タブ：
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
.removeClass("ui-corner-all ui-corner-top")
.addClass("ui-corner-bottom");
jsfiddle.netにこれを載せることができますので、 "fiddle"できますか？ – pixelfreak
この問題を解明しましたか？私もこの問題を抱えています – chrisjlee
私はjsfiddleでそれを投げました：http://jsfiddle.net/LhaHG/ –