jQuery 选项卡：面板以 100% 的高度覆盖选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14813800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery tabs: panel covers tabs at 100% height
提问by SDwarfs
I'm trying to use the tabs widgets of jQuery-UI having panels content to extend to the whole available space.
我正在尝试使用具有面板内容的 jQuery-UI 的选项卡小部件来扩展到整个可用空间。
Here's a simplified version of what I've got so far: http://jsfiddle.net/MhEEH/3/
这是我到目前为止所拥有的简化版本：http: //jsfiddle.net/MhEEH/3/
You'll see that the green panel content of #tab-1 just covers the whole page, instead of just the panel space, when I use the following CSS:
当我使用以下 CSS 时，您会看到 #tab-1 的绿色面板内容仅覆盖整个页面，而不仅仅是面板空间：
#tab-1 {
background: green;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I could use "top: 27px;" to fix that, but this would collide with two things:
我可以使用“顶部：27px；” 来解决这个问题，但这会与两件事发生冲突：
- If I change the tabs "theme", the height (27px) could possibly change
- If I have a lot of tabs, I'll have a second row below the first row. So my panel content would then cover this second row...
- 如果我更改标签“主题”，高度（27px）可能会改变
- 如果我有很多标签，我会在第一行下面有第二行。所以我的面板内容将覆盖第二行......
A clean & short solution would be fine.
一个干净而简短的解决方案就可以了。
JavaScript is acceptable, while a (clean!) CSS-only solution would be preferable...
JavaScript 是可以接受的，而（干净！）纯 CSS 的解决方案会更可取......
-- Regards,
- 问候，
Stefan
斯特凡
回答by Moshe Katz
Instead of using your own CSS, use jQuery UI's built-in feature.
不要使用您自己的 CSS，而是使用 jQuery UI 的内置功能。
var tabs = $("#tabs").tabs({heightStyle: "fill"});
From the API documentation:
从API 文档：
heightStyle
Type: String
Default: "content"
Controls the height of the tabs widget and each panel. Possible values:
- "auto": All panels will be set to the height of the tallest panel.
- "fill": Expand to the available height based on the tabs' parent height.
- "content": Each panel will be only as tall as its content.
高度样式
类型：字符串
默认值：“内容”
控制选项卡小部件和每个面板的高度。可能的值：
- “自动”：所有面板都将设置为最高面板的高度。
- “填充”：根据选项卡的父高度扩展到可用高度。
- “内容”：每个面板的高度与其内容一样高。
Although you are right that a plain CSS solution would be very nice, since you are using JavaScript anywayto build the tab functionality, it will be best to use the existing capabilities of the script you already have.
尽管您认为简单的 CSS 解决方案会非常好是对的，但由于无论如何您都在使用 JavaScript来构建选项卡功能，因此最好使用您已有的脚本的现有功能。
UPDATE:
更新：
See http://jsfiddle.net/MhEEH/45/for the simplest full example. Note that it does not need any CSS
positionrules.You need to use http://benalman.com/projects/jquery-resize-plugin/(or similar) to watch the parent for size changes. Browsers only fire the
resizeeventon the window itself by default, but this plugin extends support for that event to arbitrary elements being resized.
有关最简单的完整示例，请参阅http://jsfiddle.net/MhEEH/45/。请注意，它不需要任何 CSS
position规则。您需要使用http://benalman.com/projects/jquery-resize-plugin/（或类似的）来观察父级的大小变化。默认情况下，浏览器仅在窗口本身上触发
resize事件，但此插件将对该事件的支持扩展到正在调整大小的任意元素。
回答by Pete
I tried putting the tabs into a tab container and with the following styles
我尝试将标签放入标签容器并使用以下样式
#tab-container {position:relative; min-height:100%;}
and it seemed to work:
它似乎有效：
回答by couzzi
OP,
操作，
Check this Fiddle.
检查这个 Fiddle。
The parent #tabshas overflow: hidden;.
In addition to the children: #tabs div[id*=tab]having overflow:autoset. This ensures that the parent will set the bounds, and in the event that there is overflowing content in the tab, the scrollbar appearance will be delegated by the tab itself.
父母#tabs有overflow: hidden;。除了孩子：#tabs div[id*=tab]已overflow:auto定。这确保了父级将设置边界，并且在选项卡中存在溢出内容的情况下，滚动条外观将由选项卡本身委托。
Also, just for those unfamiliar with the syntax #tabs div[id*=tab], this wildcard will match any child divof #tabswhose idcontains "tab". This can be accomplished a number of ways, but I chose this route for quick-prototyping.
此外，对于那些不熟悉语法的人#tabs div[id*=tab]，此通配符将匹配其包含“tab”的任何子div项。这可以通过多种方式完成，但我选择了这条路线进行快速原型制作。#tabsid
Hope this helps.
希望这可以帮助。
回答by Billy Moat
Is this what you're after?
这是你追求的吗？
html, body {
height: 100%;
}
#tabs {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
}
#tab-1 {
background: green;
height: 100%;
}
回答by AnilkaBobo
I just tried to use this:
我只是尝试使用这个：
#tab-1 {
background: green;
position: relative;
height:100%;
}
and in jsfiddle it works fine. not sure how it will be on your page http://jsfiddle.net/MhEEH/7/
在 jsfiddle 中它工作正常。不知道它会如何在您的页面上 http://jsfiddle.net/MhEEH/7/
回答by Ady Ngom
Below is a link to my CSS solution hopefully that works for you
以下是我的 CSS 解决方案的链接，希望对您有用
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#tab-list {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
}
#tabs {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
}
#tab-1, #tab-2 {
background: green;
position: absolute;
top: 48px;
bottom: 0;
left: 0;
right: 0;
padding-top: 10px;
}
Someone has mentioned the Coda slider which is a great solution as well and as an alternative I might suggest this elastic content slider from codrops
有人提到 Coda 滑块也是一个很好的解决方案，作为替代方案，我可能会建议使用 codrops 的这个弹性内容滑块
http://tympanus.net/codrops/2013/02/26/elastic-content-slider/
http://tympanus.net/codrops/2013/02/26/elastic-content-slider/
Hope it helps,
希望能帮助到你，
Cheers
干杯
回答by MarmiK
回答by PSL
How about this... With this you will see the scrollbar completely visible if the content overflows
这个怎么样...有了这个，如果内容溢出，您将看到滚动条完全可见
<div id="tab-1" class="customPanel">This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!</div>
and provide style for the class, with this
并为班级提供风格，有了这个
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#tabs {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
overflow:auto;
}
#tabs .customPanel {
background: green;
}
Hope this helps!!!
希望这可以帮助！！！
回答by rickh
I don't see a need in using javascript here for basic style modifications. I've recently converted a single page full screen style app from doing all it's re sizing from javascript to pure CSS using positioning and stuff.
我认为不需要在此处使用 javascript 进行基本样式修改。我最近将一个单页全屏样式应用程序从使用定位和其他东西从 javascript 调整大小转换为纯 CSS。
Now onto a solution - try this.
现在找到一个解决方案 - 试试这个。
#tab-1 {
background: green;
height: 100%;
}
I don't see a need in using absolute positioning on the green box element because the parent fills up the space, all you need to now do is height: 100%and it should fill up the rest of the space.
我认为不需要在绿框元素上使用绝对定位，因为父元素填满了空间，你现在需要做的就是height: 100%填满其余的空间。
Edit
编辑
There seems to be an issue with the content not scrolling in this version. Struggling to find a fix for this. I feel like the jQuery UI is adding a bunch of styles and stuff to the #tab-1div which might be causing your problem. Could be worth trying to reset the styles for #tab-1and seeing what that leaves you with.
在此版本中内容不滚动似乎存在问题。正在努力寻找解决方法。我觉得 jQuery UI 正在向#tab-1div添加一堆样式和内容，这可能会导致您的问题。可能值得尝试重置样式#tab-1并查看结果。
回答by Cynthia
I added a top position value to the #tab-1 id to push it below the tab itself.
我向 #tab-1 id 添加了一个顶部位置值，以将其推到选项卡本身下方。
See: http://jsfiddle.net/MhEEH/40/
见：http: //jsfiddle.net/MhEEH/40/
Here is the pertinent CSS:
这是相关的CSS：
#tab-1 {
background: green;
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
}
Hope it helps!
希望能帮助到你！
