設置元素的高度<body>的寬度和寬度<body>的高度動態

我想.container的高度動態地設置爲<body>的寬度及其高度到<body>的寬度，它應該改變窗口的大小。設置元素的高度<body>的寬度和寬度<body>的高度動態

我想這是因爲我想通過旋轉`.container'-90度和其內容90度a la http://jsfiddle.net/3cetk351/來製作一個僅水平滾動頁面的CSS。

容器當前具有100％的高度&寬度，但是一旦它通過CSS旋轉，它將保留其繼承的尺寸，並且不會擴展到我認爲只有邏輯的瀏覽器窗口大小。

我不知道很多的JavaScript其他的不是改變值的jQuery插件，但我認爲這是可能使用JS動態改變.container的高度和寬度到<body>的計算寬度和高度分別爲。

的jsfiddle：http://jsfiddle.net/jklm313/ZaLHM/

來源

2013-07-21 carpenumidium

你最有可能想要的是，[http://api.jquery.com/resize/](http://api.jquery.com /調整/）。這是'.resize（）'事件 – Ohgodwhy

@Ohgodwhy就像我說過的，我總是js noob，不知道如何使用它：/，如果你能做演示，我會很感激。 – carpenumidium

[一個非常粗糙的草稿 - jsFiddle]（http://jsfiddle.net/v5abF/）可以這樣工作。 – Ohgodwhy

這是你以後是什麼樣的事情？

var supportsOrientationChange = 'onorientationchange' in window, orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize'; 

var $containment = document.getElementsByClassName('containment')[0]; 

$containment.style.width = window.innerHeight + 'px'; 
$containment.style.height = window.innerWidth + 'px'; 

window.addEventListener(orientationEvent, function() { 
    $containment.style.width = window.innerHeight + 'px'; 
    $containment.style.height = window.innerWidth + 'px'; 
}, false);

這是你的筆的叉這裏：http://codepen.io/stowball/pen/AIbHn

來源

2013-07-21 23:43:21

使用這似乎給容器的窗口的高度和寬度，但不是''。儘管如此，這是非常好的。謝謝馬特！以下是HTML中只有必要元素的結果http://dabblet.com/gist/6055177。 – carpenumidium

設置元素的高度<body>的寬度和寬度<body>的高度動態

回答

相關問題