如何調整基於屏幕的寬度與任何辦法

我正在尋找如何動態改變使用的瀏覽器窗口大小的div的大小建議的div。我已經使用CSS嘗試並不能得到這工作，我不能用一個百分比值。我需要div的大小是（windowSize - 100）/ 3。任何建議將是巨大的感謝如何調整基於屏幕的寬度與任何辦法

來源

2013-04-04 Scott

使用'window.onresize'事件，並得到了窗口的大小，把它插入到你的計算，那麼更改divs的大小 – Ian 2013-04-04 17:05:24

如果您希望保持寬度/高度比例（windowSize不明確，可能指代其中一個或兩個維度），則使用縮放比例還有另一個潛在的跨瀏覽器解決方案 – runspired 2013-04-04 17:10:13

CSS有一些所謂的calc()，可以這樣做：

http://jsfiddle.net/YFFcD/1/

div { 
    width: calc((100% - 100px)/3); 
}

唯一真正的限制是，它不是由IE8或以上，或Opera的支持。 http://caniuse.com/#feat=calc

但是，利用其他屬性可能會有解決方法。如果填充引起問題，請使用box-sizing: border-box（必要時爲前綴）。如果元素必須出現在所有在同一行中，display: table-cell能有點用處：

http://jsfiddle.net/YFFcD/2/

div.container { 
    display: table; 
    width: 100%; 
} 

div.container div { 
    display: table-cell; 
} 

<div class="container"> 
    <div>a</div> 
    <div>b</div> 
    <div>c</div> 
</div>

來源

2013-04-04 17:19:09 cimmanon

感謝這正是我所期待的對於。我不敢相信我找不到calc（）函數。 – Scott 2013-04-04 19:30:19

你可以得到window.innerHeight和window.innerWidth，做你的計算，然後設置div小號明確的寬度和高度：

$("#mydiv").css("width", (window.innerWidth - 100)/3); 
...

來源

2013-04-04 17:06:12

可以實現與CSS。當然在一定的價格的DIV不會有塊行爲和其他一些佈局相關情況。

的jsfiddle：example

HTML例如：

<body> 
    <div class="minus100"> 
     <div>One third</div> 
    </div> 
</body>

CSS：

div.minus100 { 
    position:fixed; 
    /* or absolute; */ 
    top:0; 
    left:50px; 
    right:50px; 
    bottom:0; 
    background-color:blue; 
} 

div.minus100 div:first-child{ 
    width:33.3%; 
    height:100%; 
    color:#fff; 
    background-color:navy; 
}

來源

2013-04-04 17:18:35 kidwon

如何調整基於屏幕的寬度與任何辦法

回答

相關問題