我如何大小格的高度，以內容的jQuery UI佈局

試圖讓一個簡單的垂直分隔欄使用 jQuery UI Layout 1.30.0.3079-rc工作。這是我的測試頁面：我如何大小格的高度，以內容的jQuery UI佈局

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>jQuery UI Layout Vertical Splitter</title> 
    <link type="text/css" rel="stylesheet" href="../Content/jquery.ui.layout.css" /> 
    <style type="text/css"> 
     body { 
      font-family: Calibri; 
      font-size: 11pt; 
      margin: 0px; 
     } 
     .RequiredBorder { 
      border: 3mm solid silver; 
      margin: 3mm; 
      padding: 3mm; 
     } 
     .ui-layout-center, .ui-layout-east, .ui-layout-west, .ui-layout-north, .ui-layout-south { 
      border: 1px solid purple; 
     } 
     #SplitContainer { 
      border: 1px solid blue; 
     } 
    </style> 
    <script type="text/javascript" src="../Scripts/jquery-1.8.0.min.js"></script> 
    <script type="text/javascript" src="../Scripts/jquery-ui-1.8.23.min.js"></script> 
    <script type="text/javascript" src="../Scripts/jquery.layout.min.js"></script> 
    <script type="text/javascript"> 
     var myLayout; 
     $(document).ready(function() { 
      myLayout = $('#SplitContainer').layout({ 
       center__minWidth: 100, 
       west__minSize: 100, 
       west__size: .5, // 50% of layout width 
       stateManagement__enabled: false 
      }); 
     }); 

    </script> 
</head> 
<body> 
    <div class="RequiredBorder"> 
     <div id="SplitContainer"> 
      <div class="ui-layout-west"> 
       LEFT 
       <ul> 
        <li>Node 1</li> 
        <li>Node 2 
         <ul> 
          <li>Node 2.1</li> 
          <li>Node 2.2 
           <ul> 
            <li>Node 2.2.1</li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <div class="ui-layout-center"> 
       RIGHT 
       <p> 
        <input type="text" value="Text 1" /> 
       </p> 
       <p> 
        <input type="text" value="Text 2" /> 
       </p> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

我希望兩個內容的div伸展，以填補容器水平，但舒展，以填補他們內容垂直。

在div寬度完全相同的工作如所期望的，但高度始終爲零的像素，除非我硬編碼的高度在CSS，例如

#SplitContainer { 
     height: 400px; 
    }

對高度進行硬編碼並不是一個可接受的解決方案。在真實網站中，這些div的內容可以是從窗口高度的一小部分到其幾倍的任何東西，並且<div class="RequiredBorder"> div必須將整個區域和大小包含在內容中。

我已通過jQuery UI的佈局文檔閱讀和搜索谷歌，但我還沒有發現任何有用的東西爲止。事情我已經嘗試過，沒有工作：

#SplitContainer { 
     display: inline-block; 
    }

這使得容器及其零寬度和高度的所有內容。

#SplitContainer { 
     position: absolute; 
     left: 0px; 
     right: 0px; 
     top: 0px; 
     bottom: 0px; 
    }

這將呈現容器及其所有內容填充整個瀏覽器窗口，覆蓋其餘內容。

了jQuery UI佈局網站上的演示頁面，因爲它們都直接把最外面的佈局<body>元素中不出現此問題。當我在我的頁面中嘗試時，它確實工作正常。但是，真正的網站將不得不將封裝在一個嵌套的<div>中。

我在IE 11和Firefox 29都表現完全一樣的行爲測試這個頁面。

來源

2014-05-07 Christian Hayter

嗯，我知道這不會工作，但嘗試添加呢？ div{ height:4em; width:4em; } <script> 非常好的機會，這不會工作-_-

來源

2014-05-07 14:26:01 epcisky21

我不明白你正在努力實現這個東西。無論如何，我嘗試過，它只是將內容設置爲固定大小，這不是我正在尋找的。 –

我如何大小格的高度，以內容的jQuery UI佈局

回答

相關問題