时间戳

首页 > 解决方案 > 使用脚本根据主面板设置左右面板宽度

javascript - 使用脚本根据主面板设置左右面板宽度

问题描述

我的问题与 CSS 和 JavaScript 有关。
我有一个名为“ main-panel”的 CSS 类（注意，它的类不是 ID）和两个左右面板“ left-panel”和“ right-panel”——都是类而不是 ID，我什至不能将类更改为 Id。
现在，我想要根据“主面板的”高度min-height设置“ ”的“ left-panel”和“ ” 。 如果加载内容后主面板的高度为 1000px；它应该是左右面板的最小高度。right-panel

标签： javascriptcss

解决方案

这是如何做到的。

const setPanelHeight = (className, height) => {
  document.getElementsByClassName(className)[0].style.minHeight = height;
};

let desiredHeight = getMainPanelHeight();
setPanelHeight("left-panel", desiredHeight);
setPanelHeight("right-panel", desiredHeight);



function getMainPanelHeight() {
  let element = document.getElementsByClassName("main-panel")[0];
  let computedStyle = window.getComputedStyle(element, null);  
  return computedStyle["height"];
}
div {
  display: inline-block;
  width: 50px;
}

.left-panel,
.right-panel {
  border: 1px solid red;
}

.main-panel {
  border: 1px solid black;
  height: 1000px;
}
<div class="left-panel"></div>
<div class="main-panel"></div>
<div class="right-panel"></div>

推荐阅读