Добрый вечер!
У меня вопрос к опытным программистам, делаю диалоговое окно с возможностью изменения размера, ну как бы ничего сложного, процедуру корректировки высоты вложенных элементов "накидал" за 30 минут, вроде работает.
Но не пойму как определить поведение если элементы не влазят в контейнер, вариант с overflow = 'hidden'/'scroll'/'auto' не подходит. т.к. некоторые дочерние элементы вложенных могут выходить за пределы контейнера.
Что посоветуете?
вот тестовая страница:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
width:100px;
float:left;
margin:5px;
border: 2px solid gray;
}
</style>
<script>
function heightTo( n ){
var containers = document.querySelectorAll('.container');
for( var i = 0, l = containers.length; i<l; i++ ){
var
container = containers[i],
children = container.children,
height = +n;
var percent = 0, // общее количество процентов
elements=[], // массив элементов с % высотой
percents=[], // высота в % по индексу
other = 0; // высота остальных элементов
container.style.height = n+'px';
// ищем элементы с % и остальные подсчеты
for( var j = 0, m = children.length; j<m; j++ ){
var element = children[j];
if( element.hasAttribute('p-height') ){
p = +element.getAttribute('p-height');
percent += p;
elements.push( element );
percents.push( p )
}else{
other += element.offsetHeight;
}
}
if( other < height ){ // если элементы будут иметь положительную высоту
var k = ( height - other )/percent;
for( var j = 0, m = elements.length; j<m; j++ ){
var element = elements[j];
element.style.height = Math.round( percents[j]*k )+'px';
}
}else{ // а вот тут не влазит, что делать?
alert(' ne vlazit !')
}
}
}
</script>
</head>
<body>
<button onclick="heightTo( 100 )">100</button>
<button onclick="heightTo( 150 )">150</button>
<button onclick="heightTo( 200 )">200</button>
<button onclick="heightTo( 300 )">300</button>
<button onclick="heightTo( 500 )">500</button>
<br/>
<div class="container">
<div p-height="30" style="height:auto; background-color:red">block 30%</div>
<div style="height:30px; background-color:green">block 30px</div>
<div p-height="50" style="height:auto; background-color: yellow">block 50%</div>
<div style="height:40px; background-color: blue">block 40px</div>
</div>
<div class="container">
<div p-height="50" style="height:auto; background-color:red">block 50%</div>
<div style="height:100px; background-color:green">block1 100px</div>
<div p-height="10" style="height:auto; background-color: yellow">block 10%</div>
<div p-height="20" style="height:auto; background-color: blue">block 20%</div>
</div>
<div class="container">
<div p-height="50" style="height:auto; background-color:red">block 50%</div>
<div style="height:100px; background-color:green">block 100px</div>
<div p-height="50" style="height:auto; background-color: yellow">block 50%</div>
<div style="height:40px; background-color: blue">block 40px</div>
</div>
</body>
</html>