如何使用當前的div寬度/高度作爲最小的寬度/高度？

如何將當前寬度/高度（均以百分比100％指定）作爲最小寬度/高度？如何使用當前的div寬度/高度作爲最小的寬度/高度？

這裏是一個嘗試：

<!doctype html> 
<html> 
    <head> 
     <title>Layout</title> 
     <script> 
      var myDiv = document.body; 
      var curWidth = myDiv.style.width; 
      var curHeight = myDiv.style.height; 
      myDiv.style.minWidth = curWidth; 
      myDiv.style.minHeight = curHeight; 

      myDiv = document.getElementById('wrapper1'); 
      var curWidth = myDiv.style.width; 
      var curHeight = myDiv.style.height; 
      myDiv.style.minWidth = curWidth; 
      myDiv.style.minHeight = curHeight; 
     </script> 
     <style type="text/css"> 
      * { 
       margin: 0; 
       padding: 0; 
      } 
      html { 
       height: 100%; 
      } 
      body { 
       height: 100%; 
      } 
      #wrapper1 { 
       width: 100%; 
       height: 100%; 
      } 
      #wrapper2 { 
       width: 8%; 
       height: 100%; 
       float: left; 
      } 
      #wrapper3 { 
       width: 92%; 
       height: 100%; 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper1"> 
      <div id="wrapper2"> 
       Wrapper 
      </div> 
      <div id="wrapper3"> 
       Wrapper 
      </div> 
     </div> 
    </body> 
</html>

嘗試設置所有div min的寬度/高度是使用Javascript當前寬度/高度（這是由CSS均爲100％）（或使用如果僅CSS可能）

來源

2012-08-12 Omar Shazly

確定我很困惑。你希望你的寬度設置爲最小寬度？爲什麼不只是忘記最小寬度/最小高度並將高度和寬度直接設置爲那些？ – Kpower 2012-08-12 01:36:19

不，他希望頁面上的所有div都與px中的高度相同。他希望其餘的div根據視圖端口大小或窗口大小的變化來匹配px。爲了什麼目的，我不知道，但從看他做了什麼，看起來他知道自己在做什麼。 – eusid 2012-08-12 04:20:07

我試圖讓我的頁面首先填充整個瀏覽器窗口（100％寬度/高度），並且在窗口大小調整或用戶放大/縮小時具有固定（不是流動）頁面的行爲 – 2012-08-12 13:17:59

請注意myDiv.style.height不會返回元素的高度，如果這是通過CSS設置的，但只有當div看起來像<div style="height: 10px"></div>。您應該使用：

var curHeight = myDiv.offsetHeight; 
var curWidth = myDiv.offsetWidth;

編輯：哦，你需要在你的HTML結束移動你的腳本標籤，否則你將無法選擇wrapper1（或在不同的文件嗎？）。

這裏是對offsetHeight和offsetWidth的參考。 Here

這是我看到您的方法中唯一的問題，假設您執行document.write來插入檢索到的css值。

來源

2012-08-12 01:45:35 afinemonkey

不，我不想使用document.insert。我希望我的頁面能夠使用100％寬度/高度填充整個瀏覽器窗口，然後按原樣放置，這樣可以防止用戶縮小窗口時div的縮小。這就是爲什麼我試圖設置最小的寬度/高度的div的大小後，分配給它100％ – 2012-08-20 20:23:47

據我所知，如果你不指定一個div的寬度和高度默認情況下它將始終從它的封閉div。例如：

<body> 
     <div id="wrapper1"> 
      <div id="wrapper2"> 
       Wrapper 
      </div> 
      <div id="wrapper3"> 
       Wrapper 
      </div> 
     </div> 
</body> 

<style> 
     #wrapper1 { 
       width: 100%; 
       height: 100%; 
      } 
</style>

這將適用的寬度和高度都爲100％，以在wrapper1，wrapper2所有3個的div，wrapper3

來源

2012-08-12 01:48:45 Shash

如何使用當前的div寬度/高度作爲最小的寬度/高度？

回答

相關問題