使用绝对 div 扩展正文或包装器高度

Question

我正在开发一个 wordpress 网站。

我有一个包含标题和条目的包装器。

我的身体高度设置为身高：100%； Wrapper 设置为 height: 100% 和 min-height: 100%。

我的页面高度会根据我的条目内容扩展，这在大多数页面上都能完美运行。

但在某些页面上，我包含了纯 CSS 选项卡，它们设置为 position:absolute 才能工作。 我用了这个例子：http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/

在包含这些选项卡的页面上，我的内容不再展开，我不能使用 position:relative 作为选项卡...

有没有办法根据我的标签接触高度来扩展身体高度？ 也许使用 Js ？ 谁能帮帮我？

这是我的 CSS：

html,body{
width: 100%;
max-width: 1220px;
font-family: 'andale';
font-size:14px;
line-height: 20px;
color: black;
text-transform: none;
background-color: #4C4C4C;
letter-spacing: 2px;height: 97%;}

#wrapper{
background-color: white;
height: auto !important; /* ie6 ignores !important, so this will be overridden below */     min-height: 100%; /* ie6 ignores min-height completely */     
margin-left: 20px;
margin-top: 20px;
padding-top: 20px;
height: 100%;}

.entry{
padding-left: 20px;
padding-right: 20px;}

#header{
font-size: 14px;
line-height: 20px;
width: 100%;
color: #FF5000;
text-decoration: none}

.menu-menu-container{clear: both;padding-top: 5px;}
#menu-menu {list-style:none;}
.menu-item {float:left;}
#menu-menu li:after{content:"\00a0|";}
#menu-menu li:before{content:"\00a0";}
#menu-menu li:first-child:before{content:"";}
#menu-menu li:last-child:after{content:"";}
#menu-menu li.current_page_item a { color:#FF5000;text-decoration: line-through }
#menu-menu li.current-page-ancestor a { color:#FF5000;text-decoration: line-through }

.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
list-style: none;
position: relative;}

.tabs li{
float: left;}

.tabs li:after{
content:"|\00a0";}
.tabs li:last-child:after{
content:"";}
.tabs label:hover {
color:#FF5000;
text-decoration: line-through}
[id^=tab]:checked + label {
color:#FF5000;
text-decoration: line-through}
[id^=tab]:checked ~ [id^=tab-content] {display: block;}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
left: 0;
position: absolute;}

这是一个 jsfiddle http://jsfiddle.net/MPhnP/

任何人都可以帮助我吗？是否可以使用我正在使用的 CSS 选项卡？ 非常感谢您的帮助！

Answer 1

哇，我记得几个月前与这个确切的问题作斗争，我什至使用你链接的那些完全相同的标签。

绝对定位的问题是您将元素定位在网页的正常流程之外 - 任何具有绝对定位的 div 都不会影响页面流程。

这让您有 2 个选择：

手动设置标签组的高度。例如：

    .tabs {
        height: 450px;
     }

我不喜欢这种解决方案，因为这意味着您不能为每个选项卡设置动态高度 - 所有选项卡的高度都相同。如果您的第一个选项卡只有几行文本，而您的第二个选项卡有很多段落，那么整个事情就会看起来很奇怪，或者您在选项卡组下会有很大的空白。

那么您还有哪些其他选择？抛弃纯 CSS 选项卡并使用 jQuery。老实说，我花了好几个小时研究纯 CSS 选项卡，试图找到/创建一些实用且实用的选项卡，但我得出的结论是这不可行。纯 CSS 选项卡只是噱头，是 CSS 强大功能的绝佳示例，但我认为它们在生产环境中没有任何实际用途。

编辑：我刚刚想到你可能可以使用 JS 让你的标签按你想要的方式工作，但是如果你要走这条路，为什么不直接使用 JS 的标签呢？