Wie mache ich jQuery Tabs() 100% hoch und Inhalt scrollbar

Question

Ich versuche, eine JS Web App mit Tabs zu erstellen. Die Besonderheit der Schnittstelle besteht darin, dass die Registerkarten so hoch wie das Fenster sein sollten und der Inhalt gescrollt werden sollte, wenn er höher als das Fenster ist. Der Inhalt besteht aus mehreren links schwebenden Feldern, die den Bildschirm ausfüllen.

Ich habe bereits einen Teil der Lösung funktioniert, aber ich kann nicht herausfinden, wie man die 100% Höhe und das Scrollen für den Container einstellen.

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

Siehe DEMO.

Behalten Sie die UI-Registerkarten mit CSS position:fixed fest.

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

Dann jQuery, um den Inhalt einer margin-top zu geben, damit sie standardmäßig unterhalb der UI Tabs angezeigt werden würde.

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

Answer 3

Vielleicht haben Sie das schon gelöst, aber hier ist eine Lösung mit Position: Absolut, das funktioniert für uns. Könnte ein Ausgangspunkt für dich sein. /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; 
}