CSS：如果我在CSS中设置高度，当我设置高度时用鼠标拖动时，面板在调整大小时会出现问题，因此它会冻结

Question

我有 3 个面板（左、中、右），当我用鼠标拖动它们时，它们会调整大小。在右侧面板中，我有一个 iframe，其 css 是

width: 100%

。为了更清楚，我将其染成红色。

我想将

iframe

的高度扩展到整个右侧面板，所以我还在 css

height:100%

中设置了

#preview

。面板中的高度延伸正确发生。

问题是，当我设置

height:100%

时，右侧面板不再可调整大小。当我用鼠标拖动它来调整大小时，它会出现问题，就像卡住了一样：它会正确拉伸（从右向左移动），但它将不再能够收缩（从左移动）向右）.

重要提示：如果我不使用

height:100%

，则右侧面板会正确调整大小

P.S：我不想使用特定的

height: ? px

，而是使用百分比

height: 100%

。

如何调整右侧面板的可调整大小（使用高度：100％）以防止其不起作用？

const gutters = document.querySelectorAll(".gutter");
const panes = document.querySelectorAll(".pane");
const minWidth = document.querySelector(".wrapper").style.getPropertyValue("--min-width");
const minHeight = document.querySelector(".wrapper").style.getPropertyValue("--min-height");

function resizer(e) {
  window.addEventListener("mousemove", mousemove);
  window.addEventListener("mouseup", mouseup);

  //   check gutter if vertical or horizontal
  const is_vertical = e.currentTarget.classList.contains("gutter-v");
  //   get previous position (x or y depending on is_vertical)
  const prev = is_vertical ? e.x : e.y;
  //   get current pane, the parent pane of the gutter you are moving
  const currentPane = e.currentTarget.parentNode;
  const currentPanel = currentPane.getBoundingClientRect();
  //   get previous pane, when move gutter-v:
  //   if current pane is center, prev pane will be left pane
  //   if current pane is right, prev pane will be center pane
  //   left pane will never be current pane cause it don't have gutter
  const prevPane = currentPane.previousElementSibling;
  const prevPanel = prevPane.getBoundingClientRect();

  function mousemove(e) {
    // minWidth and minHeight are string ('200px' and '100px' in this case), change them to integer
    const min = parseInt(is_vertical ? minWidth : minHeight);
    // calculate distance between prev and current position
    const distance = prev - (is_vertical ? e.x : e.y);
    // calculate new width/height of current pane and prev pane
    const newCurrentSize = (is_vertical ? currentPanel.width : currentPanel.height) + distance;
    const newPrevSize = (is_vertical ? prevPanel.width : prevPanel.height) - distance;
    // if new width/height is less than min, return and don't change pane style
    if (newCurrentSize < min || newPrevSize < min) return;
    // change pane width/height depending on is_vertical
    if (is_vertical) {
      currentPane.style.width = newCurrentSize + "px";
      prevPane.style.width = newPrevSize + "px";
    } else {
      currentPane.style.height = newCurrentSize + "px";
      prevPane.style.height = newPrevSize + "px";
    }
  }

  function mouseup() {
    window.removeEventListener("mousemove", mousemove);
    window.removeEventListener("mouseup", mouseup);
  }
}
gutters.forEach((gutter) => gutter.addEventListener("mousedown", resizer));

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  width: 100vw;
  background: #333;
  border: 6px solid #666;
  display: flex;
}

.pane {
  position: relative;
  color: #fff;
  /* 
      --min-width in .wrapper inline style 
      <div class="wrapper" style="--min-width: 200px;--min-height: 100px;"> 
      */
  min-width: var(--min-width);
}

.pane:last-child {
  flex-grow: 1;
}

.pane:has(.pane) {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pane>.pane {
  /* 
      --min-height in .wrapper inline style 
      <div class="wrapper" style="--min-width: 200px;--min-height: 100px;">
      */
  min-height: var(--min-height);
}

.gutter {
  --l: 100%;
  --s: 10px;
  background: #666;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.gutter-v {
  width: var(--s);
  height: var(--l);
  cursor: col-resize;
}

.gutter-h {
  height: var(--s);
  width: var(--l);
  cursor: row-resize;
}

.left {
  width: 600px;
}

.center_container {
  width: 650px;
}

.center1 {
  height: 700px;
}

#preview {
  display: block;
  width: 100%;
  height: 100%;
  background: #991717;
  border: 0;
}

<div class="wrapper" style="--min-width: 200px;--min-height: 100px;">
  <div class="pane left">
    This is the left pane.
  </div>
  <div class="pane center_container">
    <div class="gutter gutter-v"></div>
    <div class="pane center1">
      This is the center pane1
    </div>
    <div class="pane">
      <div class="gutter gutter-h"></div>
      This is the center pane2.
    </div>
  </div>
  <div class="pane">
    <div class="gutter gutter-v"></div>
    <iframe id="preview"></iframe>
  </div>
</div>

Answer 1

我尝试使用 css 回答您提出的问题。我希望这对你有帮助。

.box-wrapper {
  height: 100vh;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 30%;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 3px 3px 13px rgba(0, 0, 0, .5);
  resize: horizontal; /* or vertical or both */
  overflow: auto;
}

<div class="box-wrapper">
  <div class="box">
    <h2>Hello World</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>
</div>