Question

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

Answer 1

这是可以完成的方式。

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>

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

1 个答案: