Fit Sidebar | jQuery Plugin

main

<div class="page-header"></div>
<div class="page-body">
	<div class="main section">
		<div class="contents"></div>
	</div>
	<div class="sub section">
		<div class="contents"></div>
	</div>
	<div class="ext section">
		<div class="contents"></div>
	</div>
</div>
<div class="page-footer"></div>

2カラムでサイドバーを固定(main > sub)

<p class="dummy">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

//dummy text
for(i=0; i<30; i++) $('.dummy:eq(0)').clone().insertAfter('.dummy:eq(0)');

//fitSidebar
$('.sub .contents').fitSidebar({
	wrapper : 'div.page-body'
,	responsiveWidth : 800
});

/* ext カラムは非表示 */
.ext{
	display:none;
}
/* 800px でレスポンシブ */
@media ( min-width : 800px ){
	.main{
		display:inline-block;
		vertical-align:top;
		width:75%;
	}
	.sub{
		display:inline-block;
		vertical-align:top;
		width:25%;
	}
}

2カラムでサイドバーを固定(main < sub)

//fitSidebar
$('.sub .contents').fitSidebar({
	wrapper : 'div.page-body'
,	responsiveWidth : 800
});

/* ext カラムは非表示 */
.ext{
	display:none;
}
/* 800px でレスポンシブ */
@media ( min-width : 800px ){
	.main{
		display:inline-block;
		vertical-align:top;
		width:75%;
	}
	.sub{
		display:inline-block;
		vertical-align:top;
		width:25%;
	}
}

2カラムで両カラムを固定(main < sub)

//fitSidebar
$('.main .contents, .sub .contents').fitSidebar({
	wrapper : 'div.page-body'
,	responsiveWidth : 800
});

/* ext カラムは非表示 */
.ext{
	display:none;
}
/* 800px でレスポンシブ */
@media ( min-width : 800px ){
	.main{
		display:inline-block;
		vertical-align:top;
		width:75%;
	}
	.sub{
		display:inline-block;
		vertical-align:top;
		width:25%;
	}
}

3カラムでサイドバーを固定(main > ext > sub)

<p class="dummy">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

//dummy text
for(i=0; i<30; i++) $('.dummy:eq(0)').clone().insertAfter('.dummy:eq(0)');

//fitSidebar
$('.sub .contents, .ext .contents').fitSidebar({
	wrapper : 'div.page-body'
,	responsiveWidth : 800
});

/* 800px でレスポンシブ */
@media ( min-width : 800px ){
	.main{
		display:inline-block;
		vertical-align:top;
		width:50%;
	}
	.sub,
	.ext{
		display:inline-block;
		vertical-align:top;
		width:25%;
	}
}

3カラムでサイドバーを固定(main < sub < ext)

//fitSidebar
$('.sub .contents, .ext .contents').fitSidebar({
	wrapper : 'div.page-body'
,	responsiveWidth : 800
});

/* 800px でレスポンシブ */
@media ( min-width : 800px ){
	.main{
		display:inline-block;
		vertical-align:top;
		width:50%;
	}
	.sub,
	.ext{
		display:inline-block;
		vertical-align:top;
		width:25%;
	}
}

3カラムで全カラムを固定(main < sub < ext)

//fitSidebar
$('.main .contents, .sub .contents, .ext .contents').fitSidebar({
	wrapper : 'div.page-body'
,	responsiveWidth : 800
});

/* 800px でレスポンシブ */
@media ( min-width : 800px ){
	.main{
		display:inline-block;
		vertical-align:top;
		width:50%;
	}
	.sub,
	.ext{
		display:inline-block;
		vertical-align:top;
		width:25%;
	}
}

Fit Sidebar :: jQuery SiteKit

main

2カラムでサイドバーを固定(main > sub)

2カラムでサイドバーを固定(main < sub)

2カラムで両カラムを固定(main < sub)

3カラムでサイドバーを固定(main > ext > sub)

3カラムでサイドバーを固定(main < sub < ext)

3カラムで全カラムを固定(main < sub < ext)

sub

TENNIS Ranking

ext

FIFA Ranking