Question

我想使用以下javascript动态调整其中一个div以获取视口的高度

<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
$("#main-container-col2-rt-layout").css('height',wH);
console.log(wH);
 };

$(document).ready(function() {
   applyMapContainerHeight();
});
</script>

我的div编码为：

<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
    <?php echo $this->getChildHtml('header') ?>
    <div id="main-container-col2-rt-layout" class="main-container col2-   right-layout">
        <div class="main">
            <?php echo $this->getChildHtml('breadcrumbs') ?>
...........

这是我的电子商务网站的magento页面。请帮忙！

Answer 1

Css有专门用于此的单位：

vh和vw

演示：http://jsfiddle.net/jfbrdomb/show

div.red {
    height: 100vh;
    width: 100vw;
    background-color: red;
}

Answer 2

除了vm和vh <length>数据类型之外，我看到您的代码有效！

<style>
body {
    margin: 0; padding: 0;
}
.main-container {
    background: red;
}
</style>
<body>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
    <?php echo $this->getChildHtml('header') ?>
    <div id="main-container-col2-rt-layout" class="main-container col2-   right-layout">
        <div class="main">
            <?php echo $this->getChildHtml('breadcrumbs') ?>

</div>
</div>
</div>
</div>
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
document.getElementById("main-container-col2-rt-layout").style.height = wH;
console.log(wH);
 };

(function() {
   applyMapContainerHeight();
})();
</script>
</body>

你的问题在某种程度上不清楚问题究竟是什么，但如果问题是你想让wrapper和page没有白色背景，那么解决办法是将动态宽度应用于最高div元素（我的意思是爷爷，即wrapper）。

无法动态设置div的高度

2 个答案: