JQuery选项卡底部的空白区域
我在我的页面中使用JQuery选项卡，并使用一些借用的CSS设置/脚本成功地将选项卡放置在内容下方 我的页面左侧有一个侧栏，页面顶部有一个菜单横幅。然后，内容出现在顶部菜单横幅和底部的选项卡面板之间 我注意到在我的页面底部有一个小的空白，这会导致垂直滚动条显示。我想删除这个空间（和滚动），需要专家的帮助 我知道空间是由我的内容中的tabs部分造成的，因为我在其他主要元素上使用了firebug和消除技术，并且空间只有在我介绍tabs时才会出现 我已经将CSS填充、边距和边框宽度设置为零，但仍然可以看到空格 以下是我的HTML、CSS和脚本：JQuery选项卡底部的空白区域,jquery,css,jquery-tabs,Jquery,Css,Jquery Tabs,我在我的页面中使用JQuery选项卡，并使用一些借用的CSS设置/脚本成功地将选项卡放置在内容下方 我的页面左侧有一个侧栏，页面顶部有一个菜单横幅。然后，内容出现在顶部菜单横幅和底部的选项卡面板之间 我注意到在我的页面底部有一个小的空白，这会导致垂直滚动条显示。我想删除这个空间（和滚动），需要专家的帮助 我知道空间是由我的内容中的tabs部分造成的，因为我在其他主要元素上使用了firebug和消除技术，并且空间只有在我介绍tabs时才会出现 我已经将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>
$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
.removeClass( "ui-corner-all ui-corner-top" )
.addClass( "ui-corner-bottom" );
我知道这不是一个答案，而是一个止痛药，但给你。将此添加到您的样式中：
.ui-helper-clearfix::after {
display: inline !important;
}
选项卡插件本身应用于其DOM节点的clearfixes似乎有问题。覆盖它从样式继承的
display:block.ui-helper-clearfix::after {
display: inline !important;
}