Question

我正在一个关于wordpress的网站上工作。

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

我的身高设定为身高：100％; 包装设置为高度：100％，最小高度：100％。

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

但是在某些页面上，我已经包含了纯CSS标签，它们被设置为position：absolute to work。我使用了这个例子：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都不会对页面流有贡献。

这为您提供了两个选项：

手动设置选项卡组的高度。例如：

    .tabs {
        height: 450px;
     }

我不喜欢这个解决方案，因为这意味着每个标签都没有动态高度 - 所有标签都是相同的高度。如果你的第一个标签只有几行文字而你的第二个标签有很多段落，整个事情看起来很奇怪，或者你在标签组下面会有很大的差距。

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

编辑：我刚刚想到你可能会使用JS让你的标签按照你想要的方式工作，但是如果你要沿着这条路走下去，为什么不只是使用JS标签呢？

使用绝对div内部扩展主体或包装器高度

1 个答案: