размер тела или обертки с абсолютным div внутри

Question

Я работаю над веб-сайтом на Wordpress.

У меня есть обертка с заголовком и записью внутри нее.

Мой рост: высота: 100%; Упаковщик настроен на высоту: 100% и минимальную высоту: 100%.

Высота моей страницы расширяется в зависимости от содержания моей записи, которая отлично работает на большинстве страниц.

но на некоторых страницах я включил Pure CSS Tabs, которые установлены в положение: абсолютное для работы. Я использовал этот пример: http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/

на страницах, включая те вкладки моего содержание не расширяющие больше, я не могу использовать позицию: по отношению к вкладкам ...

Есть ли способ расходуя высоты тела в зависимости от моей высоты контакта вкладки? возможно, используя 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, но я не думаю, что они имеют практическое применение в производственной среде.

EDIT: Мне просто пришло в голову, что вы, вероятно, можете использовать JS, чтобы ваши вкладки работали так, как вам хочется, но если вы собираетесь идти по этому маршруту, почему бы просто не использовать вкладки JS?