Question

我正在制作针对Go语言presentation tool的扩展（这不是Go问题），展示here。

目前，当在演示文稿中运行可运行的代码段时，会显示固定大小的输出面板，例如here（您可以单击该页面上的“运行”按钮以在代码段中运行Go代码 - 执行服务器端）。我有一个更改列表，允许jquery-ui从N，W和NW句柄调整面板的大小。这一切都很好。以下是相关的代码和CSS：

play.js（摘录）：

  function init(code) {
    var id = getId();

    var output = document.createElement('div');
    var outpre = document.createElement('pre');
    var stopFunc;

    $(output).resizable({handles: "n,w,nw"});

    function onKill() {
      if (stopFunc) {
        stopFunc();
      }
    }

    function onRun() {
      onKill();
      outpre.innerHTML = "";
      output.style.display = "block";

    ... more

styles.css（摘录）：

/* Code */
div.code {
  outline: 0px solid transparent;
}
div.playground {
  position: relative;
}
div.output {
  position: absolute;
  left: 50%;
  top: 50%;
  right: 40px;
  bottom: 40px;
  background: #202020;
  padding: 5px 10px;
  z-index: 2;

  border-radius: 10px;
  -o-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

}
div.output pre {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  overflow: auto;
}
div.output .stdout, div.output pre {
  color: #e6e6e6;
}
div.output .stderr, div.output .error {
  color: rgb(244, 74, 63);
}
div.output .system, div.output .exit {
  color: rgb(255, 209, 77)
}
.buttons {
  position: relative;
  float: right;
  top: -60px;
  right: 10px;
}
div.output .buttons {
  position: absolute;
  float: none;
  top: auto;
  right: 5px;
  bottom: 5px;
}

/* Output resize details */
.ui-resizable-handle {
  position: absolute;
}
.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}
.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}
.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

除了一个问题外，这几乎可以实现我想要的所有内容：我想为输出面板指定最小尺寸，以便控制按钮始终由面板包围。我可以使用div.output中的min-height和min-width CSS属性来实现这一点，除了这些属性通过移动面板的底部/右边缘来强制执行最小值。

如何在保持底部和右边位于原始位置的同时指定最小高度和宽度？

Answer 1

您可以对按钮使用相对绝对定位。因此，您可以将<pre>标记的最小高度设置为36px小于输出框的最小高度。然后，将按钮的div放在输出div中的任何位置。

div.output {
    职位：亲属;
  }

div.buttons {
  位置是：绝对;
  底部：0;
  右：150px;
  }

如何使用jQueryUI调整大小来强制div最小大小 - 不允许面板移动？

1 个答案: