基於瀏覽器窗口的大小動態調整div的大小

我想知道如何根據瀏覽器窗口的大小動態調整div的大小。我已經成立了，說明我的問題，這裏jsbin： http://jsbin.com/uxomul 基於瀏覽器窗口的大小動態調整div的大小

我想要做的是調整保存圖像的股利，使股利總是充滿還剩下些什麼瀏覽器窗口的高度（除了在底部設置25px的邊距，設置在主體上）。

這裏有一個演示，也許說明我想達到更清晰的：http://emilolsson.com/shop/demo/layers

任何想法將接近這一目標的最佳方式是什麼？

2012-01-03 INT

你可以做這樣的事情：

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25僅僅是一個樣品編號，例如你的保證金（你可以動態地得到這個太）

您可能還想將其封裝到一個函數中，並在頁面加載和調整大小時調用此函數

來源

2012-01-03 19:30:20 Andre

完美的作品，沒想到它會是容易的，謝謝！編輯：現在意識到我需要使用-120而不是-25，爲什麼？ http://jsbin.com/afokor – INT 2012-01-03 21:54:37

也許還有其他的東西你沒有考慮到，比如邊框，邊框，邊距等等。如果你知道所有你需要的元素，你可以使用'jQuery（element ）.outerWidth（true）'在每個 – Andre 2012-01-05 14:12:08

上設置寬度通過 $（element）.attr（'width'，100）將設置寬度值，但不調整調用元素的大小。值得一提。您也可以使用$（'element'）.css（'width'，'100px'），它可以在調用時調整元素的大小。 – NuclearPeon 2013-01-31 23:14:05

您可以嘗試綁定瀏覽器窗口的resize事件。

例如：

window.onresize = function() { 
//your code 
}

來源

2012-01-03 19:25:11 scripto

使用CSS位置：絕對/相對結合CSS頂部/底部/左/右。例如：

<!doctype html> 
<html> 
    <head> 
     <style> 
      html, body { margin:0; padding:0; width:100%; height:100%; } 

      #head   { width:100%; height:100px; background:black; color:white; } 
      #head > h1 { margin:0; } 

      #body   { position:absolute; width:100%; top:100px; bottom:25px; background:red; } 
      #body > div { position:absolute !important; } 
      #body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; } 
      #body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; } 
      #body-content > img { margin:25px; width:500px; vertical-align:middle; } 
     </style> 
    </head> 

    <body> 

     <!-- Head --> 
     <div id="head"> 
      <h1>Header</h1> 
     </div> 

     <!-- Body --> 
     <div id="body"> 

      <!-- Sidebar --> 
      <div id="body-sidebar"> 
       <h2>Sidebar</h2> 
      </div> 

      <!-- Content --> 
      <div id="body-content"> 
       <h2>Content</h2> 
       <img src="http://dl.dropbox.com/u/3618143/image1.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image2.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image3.jpg" /> 
      </div> 

     </div> 

    </body> 
</html>

來源

2012-01-03 20:54:42

嗯，我在本地和jsbin上都試過這個（不是說它會有所作爲），但它似乎不起作用？ http://jsbin.com/oxeqok – INT 2012-01-03 21:16:39

它適用於Chrome，FF，IE 7+，Safari和Opera本地。該示例顯示了三個部分：Head，Sidebar和Content。邊欄和內容都水平填充頁面（減去25px底部邊距）。頭部高度爲100像素，側邊欄寬度爲200像素。內容填充了剩餘區域，並且爲了簡化而具有滾動條，但可以實現自定義幻燈片式滾動效果（如您的示例中）。你看到了什麼？ – 2012-01-03 22:38:35

位置必須是固定的，因此它將自動調整大小。

如果屏幕高度在運行時

在CSS片將這個改變：

#FitScreenHeight 
{ 
    position:fixed 
    height:100% 
}

來源

2015-11-02 11:36:39 Tarek

我不知道這是普遍適用的。。。 – 2017-04-12 18:43:57

基於瀏覽器窗口的大小動態調整div的大小

回答

相關問題