Jak zrobić zakładki jQuery() 100% wysokiej i zawartości przewijanej

Question

Próbuję utworzyć aplikację internetową JS z zakładkami. Specjalnością interfejsu jest to, że zakładki powinny być tak wysokie, jak okna, a zawartość powinna być przewijana, jeśli jest wyższa od okna. Treść składa się z kilku lewych paneli, które wypełniają ekran.

Mam już część rozwiązania działającego, ale nie wiem, jak ustawić wysokość 100% i przewijanie kontenera.

http://jsfiddle.net/KhwZS/1242/

<div class="tabs"> 
<ul> 
    <li><a href="#tab1">Tab1</a></li> 
</ul> 
<div id="tab1"> 
    <div class="container clearfix"> 
     <div class="floated"></div> 
     <div class="floated"></div> 
     <div class="floated"></div> 
    </div> 
</div> 

Answer 1

http://jsfiddle.net/KhwZS/1245/

CSS:

html, body { 
    height: 100%; 
} 
.tabs { 
height: 100%; 

}

#tab1 { 
    height: 100%; 
    overflow: auto; 
} 

Answer 2

Zobacz DEMO.

Utrzymuj zakładki interfejsu użytkownika za pomocą CSS position:fixed.

.ui-tabs-nav { 
    position: fixed; 
    width: 100%; 
} 

Następnie za pomocą jQuery dać TREŚCI margin-top tak, że zostaną przedstawione poniżej kartami UI domyślnie.

$("#tab1").css("margin-top", $(".ui-tabs-nav").height()); 

Answer 3

Być może już to rozwiązałeś, ale oto rozwiązanie z pozycją: absolutna, która działa dla nas. Może być dla ciebie punktem wyjścia. /Staffan

.tabs{ 
position: absolute; 
top: 0px; 
left: 0px; 
bottom: 0px; 
right: 0px; 
margin: 0px; 
} 


.ui-tabs .ui-tabs-nav { 
position: absolute; 
top: 0; 
left: 0px; 
height: 18px; 
right: 0; 
} 


.ui-tabs-panel { 
position: absolute; 
top: 18px; 
left: 0; 
bottom: 0; 
right: 0; 
overflow: auto; 
}