CSS Web應用程序窗口大小調整導致格成爲窗口

使用此代碼，頁面給我適當的寬度，也上調整。但高度必須用jQuery來調節。這給了我一個div其中高度是多一點的是100％，我想，和調整頁面的高度時，不會改變......

Here is the code:http://jsfiddle.net/T6Uv4/

2013-04-12 Laurent

這取決於你正在嘗試做的。但如果您將position: absolute;更改爲position: fixed;，則應該調整頁面的大小。

但是，如果您在頁面上有滾動條，那麼您可能不希望它保留在頁面上的相同位置。

position: absolute;它的問題不是動態的，所以如果你改變瀏覽器的大小，它會保持原來的大小，就像頁面第一次加載時一樣。如果你CRTL + F5換頁瀏覽器中的內容會彈出到地方後，它應該是爲position: absolute;

這裏是一個position: relative;Jsfiddle

這裏是你的jQuery代碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    var windowHeight = $(window).height(); 
    $('#content').css({'height':windowHeight+'px'}); 
}); 
</script>

是這更多你在找什麼？

新的jsfiddle更新：updated fiddle

你需要清除體內填充和利潤率，也容器周圍的邊框。

來源

2013-04-12 12:49:19 Andrew

當我將其更改爲修復，它以某種方式完全相同的行爲... – Laurent

您需要向我們展示您嘗試使用完整的代碼。去jsfiddle並把你的代碼放在那裏，這樣我們就可以玩弄它了。 – Andrew

好的，但是有趣的是這個：改變它：'#content { border：2px solid; 位置：相對; }' – Laurent

我試圖解釋這種現象：如果你有一個屏幕分辨率1000像素（只是一個例子）

，80％的是800像素。但是，如果您將頁面大小調整爲500px，則80％會抓到400px。那些400像素+ 210px保證金= 610px

解決方案（不500px的！）：儘量把左margin和你padding在porcentual值或em單位，使內容內邊距調整大小。

這是fiddle。

請注意，當您調整屏幕大小時，滾動條會再次出現。您可以修復它將邊框更改爲em單位。完美的解決方案遇到了在整個頁面中設置沒有固定值。

對於更復雜的尺寸調整，你可以使用Mediaqueries

來源

2013-04-12 12:50:33 Arkana

不，這不尊重邊緣（重疊），寬度是好的，但高度是有點太大了 – Laurent

CSS Web應用程序窗口大小調整導致格成爲窗口

回答

相關問題