Geek asks and answers

How to make jQuery () tabs 100% higher and content scrolls

I am trying to create a tabbed JS web application. The peculiarity of the interface is that the tabs should be as tall as the window, and the content should scroll if it is larger than the window. Content is created from several left floating panels that fill the screen.

I already have a part of the solution, but I cannot figure out how to set the height to 100% and scroll for the container.

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>

jQuery tabs with scrolled content

+5
source share
3 answers

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

CSS

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

}

#tab1 {
    height: 100%;
    overflow: auto;
}
+4
source

, , : , . . /

    .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;
}
+2

. DEMO.

Hold UI tabs with CSS position:fixed.

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

Then use jQuery to provide the contents of a margin-topso that they appear below the default UI tabs.

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

More articles:


All Articles