设置元素的高度<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/

你最有可能想要的是，[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

使用这似乎给容器的窗口的高度和宽度，但不是'

'。尽管如此，这是非常好的。谢谢马特！以下是HTML中只有必要元素的结果http://dabblet.com/gist/6055177。 – carpenumidium

设置元素的高度的宽度和宽度的高度动态

相关推荐