Форум Сайтостроение Веб-строительство

overflow:hidden блока в зависимости от размеров другого

yaushev
На сайте с 02.11.2012
Offline
27
yaushev
777

Приветствую, сломал всю голову, нужны подсказки ;)

Есть два блока (на схеме А и В).

Нужно чтобы по высоте блок B подстраивался под блок А. При этом содержимое блока B обрезалось overflow:hidden.

Получается что-то типа:

<div class="obshiy">
<div class="A" style="float:left;">содержимое</div>
<div class="B" style="overflow:hidden;">содержимое</div>
</div>

Есть мысли?

Высота блока А динамическая, меняется в зависимости от количества содержимого в меньшую или большую сторону.

jpg 142282.jpg
oux
На сайте с 07.02.2010
Offline
83
oux
#1
Есть мысли?

Нет. Самый простой способ - на js

V
На сайте с 10.01.2012
Offline
85
Varenik
#2

Мне в голову приходит решение только на JS

<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="obshiy" style="width: 500px;height: auto;">
	<div class="one" style="float:left;width: 250px;">содержимое содержимое содержимое содержимое содержимое содержимое </div>
	<div class="two" style="overflow:hidden;width: 250px;">содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое </div>
</div>
<script>
$( document ).ready(function() {
	$(".two").height( $(".one").height());
});
</script>
</body>
</html>

Демо на JSFiddle

yaushev
На сайте с 02.11.2012
Offline
27
yaushev
#3
Varenik:
Мне в голову приходит решение только на JS
Демо на JSFiddle

Благодарю, это действительно выход.

web-developer
На сайте с 24.11.2014
Offline
15
web-developer
#4

Если я правильно понял, то почему бы не использовать

Position: relative;

->

position: absolute;

-> Height: 100%

yaushev
На сайте с 02.11.2012
Offline
27
yaushev
#5
web-developer:
Если я правильно понял, то почему бы не использовать
Position: relative;
->
position: absolute;
-> Height: 100%

"В" блок может быть больше чем "А" изначально.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий