index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js"></script>
</head>
<body>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis temporibus dolorum, tenetur adipisci quaerat optio sit commodi ipsum nobis consectetur, officiis. Blanditiis esse est repudiandae debitis quam autem, perspiciatis tempore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eaque debitis quibusdam veritatis itaque vitae illo sequi, quo nemo officiis culpa unde, ut ex nisi pariatur, porro neque modi vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis temporibus dolorum, tenetur adipisci quaerat optio sit commodi ipsum nobis consectetur, officiis. Blanditiis esse est repudiandae debitis quam autem, perspiciatis tempore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eaque debitis quibusdam veritatis itaque vitae illo sequi, quo nemo officiis culpa unde, ut ex nisi pariatur, porro neque modi vero.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima beatae necessitatibus omnis, pariatur accusantium quaerat vitae officiis qui, magnam magni possimus repudiandae odit optio reiciendis iusto. Sit veniam reprehenderit, dolorem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt consequatur eum dolorem consequuntur! Dicta illum sit, facere nihil aspernatur labore delectus itaque hic, quaerat, esse placeat ullam adipisci, numquam. Necessitatibus?
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left, .right {
float: left;
width: 20%;
padding: 20px;
}
.left {
background: coral;
}
.right {
background: orange;
}
1.js
window.onload = function() {
var left = document.querySelector('.left');
var right = document.querySelector('.right');
function equalHeight() {
// Формируем высоту автоматически.
left.style.height = 'auto';
right.style.height = 'auto';
var leftH = left.offsetHeight; // offsetHeight - высота элемента с учетом вертикальных полей и границ в пикселях.
var rightH = right.offsetHeight;
var max = Math.max(leftH, rightH); // находим максимальное значение
// Присвоим максимально значение этим элементам.
left.style.height = max+'px';
right.style.height = max+'px';
console.log(left);
}
equalHeight();
// При изменении размеров окна также будем изменять размер колонок.
window.onresize = equalHeight;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js"></script>
</head>
<body>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis temporibus dolorum, tenetur adipisci quaerat optio sit commodi ipsum nobis consectetur, officiis. Blanditiis esse est repudiandae debitis quam autem, perspiciatis tempore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eaque debitis quibusdam veritatis itaque vitae illo sequi, quo nemo officiis culpa unde, ut ex nisi pariatur, porro neque modi vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis temporibus dolorum, tenetur adipisci quaerat optio sit commodi ipsum nobis consectetur, officiis. Blanditiis esse est repudiandae debitis quam autem, perspiciatis tempore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eaque debitis quibusdam veritatis itaque vitae illo sequi, quo nemo officiis culpa unde, ut ex nisi pariatur, porro neque modi vero.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima beatae necessitatibus omnis, pariatur accusantium quaerat vitae officiis qui, magnam magni possimus repudiandae odit optio reiciendis iusto. Sit veniam reprehenderit, dolorem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt consequatur eum dolorem consequuntur! Dicta illum sit, facere nihil aspernatur labore delectus itaque hic, quaerat, esse placeat ullam adipisci, numquam. Necessitatibus?
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left, .right {
float: left;
width: 20%;
padding: 20px;
}
.left {
background: coral;
}
.right {
background: orange;
}
1.js
window.onload = function() {
var left = document.querySelector('.left');
var right = document.querySelector('.right');
function equalHeight() {
// Формируем высоту автоматически.
left.style.height = 'auto';
right.style.height = 'auto';
var leftH = left.offsetHeight; // offsetHeight - высота элемента с учетом вертикальных полей и границ в пикселях.
var rightH = right.offsetHeight;
var max = Math.max(leftH, rightH); // находим максимальное значение
// Присвоим максимально значение этим элементам.
left.style.height = max+'px';
right.style.height = max+'px';
console.log(left);
}
equalHeight();
// При изменении размеров окна также будем изменять размер колонок.
window.onresize = equalHeight;
}
Комментариев нет:
Отправить комментарий