Как прижать Right SideBar к низу страницы?

F_Z_14 · February 2, 2012

Всем привет!

Подскажите как можно прижать правую колонку к низу страницы, чтобы она была прижата при любом размере левого блока с контентом?

HTML-структура такая:

<body>

</div>

</div>

</div>

</div>

</body>

Прижатый блок справа:

Edited February 2, 2012 by F_Z_14

Switch74 · February 2, 2012

нет стилей, а вообще данное действо делается height:100%;

F_Z_14 · February 2, 2012

нет стилей, а вообще данное действо делается height:100%;

CSS:

/*

——————————--Осноные_стили————————————*/

html, body {

font: 14pt 'Open Sans';

margin: 0;

padding: 0;

background: #f1f1f1;

}

html

{

height: 100%;

}

#wrapper

{

min-width: 1000px;

}

#sb_right

{

float:right;

width: 25%;

background: #4a4a4a;

color: #aaaaaa;

}

#sb_right a

{

color: #aaaaaa;

}

#sb_right a:hover

{

color: #fff;

}

.header

{

margin: 0;

padding: 0;

height: 80px;

overflow: hidden;

font: 24pt 'Open Sans';

}

.header ul

{

list-style: none;

margin: 10px 0 0 0;

padding: 0;

}

.header ul li

{

display: inline-block;

margin: 0 10px 0 0;

}

.header .separator

{

position: relative;

top: -5px;

color: #474747;

}

#right_header

{

text-align: center;

margin: 0;

padding: 10px 0 0 0;

}

#right_header a:first-child

{

margin: 10px 0 0 0;

display: inline-block;

}

#left_header

{

padding: 10px 0px 0px 35px;

/*background: #cbcbcb;*/

}

#left_header a:hover

{

color: #aaaaaa;

}

#content

{

padding: 25px;

color: #666666;

margin: 10px 0 0 10px;

text-align: justify;

}

#content p

{

text-indent: 25px;

margin-right: 0;

}

#sb_right_content

{

padding: 25px 50px;

height: 100%;

text-align: center;

}

/*

——————————————————————--*/

Можете пример привести, где это реализовано?

Сколько ни пробовал, ставил height: 100%, min-height: 100% и на блок и на body, html - не получается.

С Height: 100% получалось только, чтобы правый сайдбар был растянут на высоту окна, но если левый блок left был заполнен content'ом, у которого высота больше чем у sb_right, то sb_right при прокрутке оставался того же размера. То есть на высоту клиентского окна браузера, что меньше высоты блока left.

Edited February 2, 2012 by F_Z_14

Switch74 · February 2, 2012

могу предложить такое решение


<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#body{
	position:relative;
	margin:0px auto;
	width:1000px;
	min-height:100%;}
#content{
	margin-right:210px;
	background:#ddd;}
#right{
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	width:200px;
	background:#999;}
#footer{
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	margin-right:210px;
	background:#bbb;}
</style>
<div id="body">
	<div id="content">
		content
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		content
	</div>
	<div id="right">
		right
	</div>
	<div id="footer">
		footer
	</div>
</div>

Edited February 2, 2012 by Switch74

F_Z_14 · February 3, 2012

могу предложить такое решение


<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#body{
	position:relative;
	margin:0px auto;
	width:1000px;
	min-height:100%;}
#content{
	margin-right:210px;
	background:#ddd;}
#right{
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	width:200px;
	background:#999;}
#footer{
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	margin-right:210px;
	background:#bbb;}
</style>
<div id="body">
	<div id="content">
		content
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		content
	</div>
	<div id="right">
		right
	</div>
	<div id="footer">
		footer
	</div>
</div>

Спасибо, помогло

Sign In

Как прижать Right SideBar к низу страницы?

Question

F_Z_14

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

F_Z_14

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

F_Z_14

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information