如何使用jQueryUI調整div的最小大小 - 不允許面板移動？

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 {
position：relative;
}

div.buttons {
位置：絕對;
bottom：0;
right：150px;
}