Один блок определяет высоту второго и ставит его значение (js)
- 18 октября, 2022
- 5:40 пп
- Нет комментариев
Иногда нужно, чтобы рядом стоящий блок(div, section) принимал высоту рядом стоящего, либо родительского, для этого собственно предлагаю решение
JS
<script type="text/javascript">
var oldHandler = window['onload']; // сохраняем старый onload (если есть)
window['onload'] = function() {
if(typeof(oldHandler) == 'function') {
oldHandler();
}
setHeight(); // наша функция
};
function setHeight() {
var b1 = document.getElementById('block-one'); // первый блок
var b2 = document.getElementById('block-two'); // второй блок
if (!b1 || !b2) return;
var h1 = b1.offsetHeight;
var h2 = b2.offsetHeight;
if (h1 > h2) {
b2.style.height = (h1 - 10) + 'px';
b1.style.height = (h1 - 10) + 'px';
}else if (h1 < h2) {
b1.style.height = (h2 - 10) + 'px';
b2.style.height = (h2 - 10) + 'px';
}
}
</script>
HTML
<style type="text/css">
#block-one, #block-two {
width: 300px;
border: 1px solid #999;
padding: 5px;
}
#block-one { float: left; }
#block-two { float: right; }
</style>
<div id="block-one">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="block-two">
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>
Похожие записи
21.11.2024
Комментариев нет
14.06.2024
Комментариев нет
17.05.2024
Комментариев нет
