JQuery 选项卡底部的空白区域

发布于 2024-11-24 01:57:37 字数 3260 浏览 2 评论 0原文

我在页面中使用 JQuery 选项卡，并使用一些借用的 CSS 设置/脚本成功地将选项卡放置在内容下方。

我的页面左侧有一个侧边栏，页面顶部有一个菜单横幅。然后，内容将显示在顶部菜单横幅和底部选项卡面板之间。

我注意到页面底部有一个小空白区域，导致显示垂直滚动条。我想删除这个空间（和滚动）并需要专家的帮助。

我知道该空格是由我的内容的选项卡部分引起的，因为我在其他主要元素上使用了萤火虫和消除技术，并且该空格仅在我引入选项卡时才出现。

我已将 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" );

原文

I am using JQuery tabs in my page, and have successfully managed to place the tabs below the content using some borrowed CSS settings/script.

My page has a side bar on the left side, and a menu banner at the top of the page. The content then appears between the top menu banner and the tabs panel at the bottom.

I noticed there is a small blank space at the bottom of my page whichs results in the vertical scrollbar showing. I would like to remove this space (and the scrolling) and need some help from an expert.

I know the space is caused by the tabs section of my content because I have used firebug and elimination techniques on other major elements and the space only appears when I introduce the tabs.

I have set the CSS padding, margins, and border-width to zero but still see the space.

Here is my HTML, CSS, and script:

<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>

And my 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;
}

My Javascript:

// Positions tabs at the bottom of the content:

$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
    .removeClass( "ui-corner-all ui-corner-top" )
    .addClass( "ui-corner-bottom" );

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青巷忧颜 2024-12-01 01:57:37

我知道这不是一个答案，而是一个止痛药，但你就可以了。将其添加到您的样式中：

.ui-helper-clearfix::after {
    display: inline !important;
}

修补小提琴 - http://jsfiddle.net/uTatW/

看起来是一个问题通过clearfixes，选项卡插件本身适用于其DOM 节点。覆盖它从样式继承的 display: block 似乎可以消除这个问题，而不会造成任何损害。

I understand this is not an answer per say, rather a pain killer, but here you go. Add this to your styles:

.ui-helper-clearfix::after {
    display: inline !important;
}

Patched fiddle - http://jsfiddle.net/uTatW/

Looks to be a problem with the clearfixes the tabs plug-in itself applies to its DOM nodes. Overriding the display: block it inherits from the styles removes this trouble seemingly without hurting anything.

回复收藏 0 原文

~没有更多了~