Наследование высоты блока

DeeMon · December 7, 2012

Друзья, помогите разобраться... уже весь мозг сломал :dash:

Есть 2 блока, левый основной и правый, который должен наследовать высоту левого.

Но есть небольшая хитрость!

Максимальная высота левого не ограничена, когда как минимальная - 400px.

У правого нужно жестко зафиксировать, что если высота левого 400px, то у него 400px. А если больше 400, то наследовать его высоту, которая меняется в зависимости от наполнения!

Собственно все это нужно, что бы прикрутить полосу прокрутки для правого блока.

Т.е. если вдруг высота правого становится больше левого, то у него должна появляться прокрутка!

Возможно криво объяснил :blush:


#main {
	float: left;
	margin-top: 16px;
	background-image: url("body.png");
}
#part1 {
	float: left;
	width: 630px;
	padding: 10px 0 5px 20px;
	text-align: justify;
	min-height: 400px;
}
#part2 {
	font-size: 12px;
	margin-left: 668px;
	width: 253px;
	padding: 15px 15px 5px 30px;
	overflow: auto;
	overflow-x: hidden;
}

Edited December 7, 2012 by DeeMon

PanSoul · December 7, 2012

Что ж, помогу)

Вот лови рабочий примерчик, если что-то будет "интересно-непонятно" - спрашивай


<!DOCTYPE html>
<html>
<head>
<title>Good luck</title>
<style>
	.wrapper{
		border:1px solid red;
		position:relative;				
		min-height:400px;
		width:450px;
	}

	.b_right{
		background:#ccc;
		width:300px;
		height:100%;		
		overflow-y:scroll;
		position:absolute; /* т.к. основным блоком должен быть левый блок */
		left:150px;
		top:0;
	}

	.b_left{
		width:150px;		
		min-height:100%;
		background:#ddd;
		min-height:400px;		
	}
</style>
</head>
<body>
	<div class="wrapper">
		<div class='b_left'>
			All work! 
		</div>
		<div class="b_right">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		</div>
	</div>
</body>
</html>

DeeMon · December 7, 2012

Низкий тебе поклон!!! Все заработало!

Я тут тоже параллельно придумал способ через жопу, но твой гараздо проще и локаничней! Спасибо огромное!

единственное проблемка с отступами (на картинке пример). Правая часть, почему-то игнорирует отпуты подвала и растягивает себя до его начала :wacko:


#main {
	float: left;
	margin-top: 15px;
	position:relative;
	min-height:400px;
	width:100%;
}
#part_l {
	float: left;
	width: 630px;
	padding: 10px 15px 5px 20px;
	min-height:400px;
}
#part_r {
	width: 265px;
	margin-left: 680px;
	padding: 15px 5px 0 15px;
	height: 100%;
	overflow-y: auto;
	position: absolute;
}

UPD: решил, но немного криво... просто убрал отступ сверху, земенив его на <br />

Edited December 8, 2012 by DeeMon

Sign In

Наследование высоты блока

Question

DeeMon

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

PanSoul

Link to comment

Share on other sites

DeeMon

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information