调整窗口大小时 div 的高度不合适答案

【问题标题】：Height of the div is not proper when resizing the window调整窗口大小时 div 的高度不合适
【发布时间】：2014-03-04 05:41:38
【问题描述】：

我在html页面中有一个div，如下所示，

 <html>
    <head>
      <script>..</script>

    </head>
    <body>
    <div> </div>

    </body>
    </html>

我需要使用脚本在 div 中加载图表，在加载图表之前 div 的高度为 0，因此我指定了 450 作为初始高度。图表正确呈现。但是当我调整窗口大小时，div的宽度会根据窗口大小而改变，但div的高度总是450。

如何根据窗口大小更改 div 的高度。

另一个疑问：

只有在div中加载了一个内容后，我们才能得到这个div的高度？

提前致谢。

【问题讨论】：

请解释一下您所说的图表是什么意思，是图像还是 iframe？
所以为了清楚起见，您希望包含内容的 div 在窗口高度增加时增加，在窗口高度降低时减少，对吧？
@JoshuaKissoon 是的，div 应该服从窗口高度
@Varinder 它是使用 svg 元素绘制的图像

标签： jquery html css

【解决方案1】：

使用max-height 属性。

点赞：max-height:450px;

它会帮助你

【讨论】：

【解决方案2】：

您是否以像素为单位设置高度？如果是这样，450 像素就是 450 像素。尝试将其设置为 %。

<body style="height: 100%">
   <div style="height: 100%"></div>

【讨论】：

【解决方案3】：

你需要使用

min-height: 450px;   // Set the minimum height
height: 100%;        // Set the div to resize according to the window height

无论窗口高度是多少，使用height 都会保持div 的高度不变，这就是你使用min-height 的原因。然后让 div 随窗口高度增长，使用height: 100% 或您需要 div 的窗口高度的任何百分比。

注意：由于您的 div 最终位于您的 html 和 body 标记中，因此您还需要设置它们的高度以获取整个窗口高度：

html, body
{
    height: 100%;
}

这里是一个例子：http://jsfiddle.net/qvQw9/

对于第二个问题，要获取div的高度，任何时候都需要使用javascript：

var divHeight = document.getElementById('divId').clientHeight;

【讨论】：

嘿@AnandJaju，高度将使其保持不变，而不是最小高度。查看我添加的示例小提琴。
通过 min-height 属性，它将保持该 div 的最小高度 450px，并且随着内容的增加它会增加它的高度。如果内容较少，则不会降低其高度..
没错，但问题是“如何改变 div 相对于窗口大小的高度”而不是相对于内容高度。
他的问题并不清楚他是否希望 div 的高度应该减小或增加.. 并且大多数时候我们调整窗口大小意味着我们正在从全屏减小窗口大小..
无论是增加还是减少窗口大小，div的高度都应该改变。

【解决方案4】：

您可以使用min-height 属性，它会强制将 div 设置为最小高度，也可以设置max-height 属性，以便您可以根据需要设置 div 的最大高度。

对于您的第二个问题，您还可以获得 div 的高度：

<div id="testDiv" style="height:200px"></div>

脚本：

alert($("#testDiv").height())

有了这个，你可以得到你想要的 div 的高度。

【讨论】：

【解决方案5】：

这是一种解决方法（如果您知道媒体元素的纵横比）

这个想法是设置div 的样式，因为它与媒体元素的纵横比匹配，所以它是流畅的，我提到了here 和there

下面会带你去正确的方向

HTML

<div class="fluid-wrapper">
    <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" />
</div>

CSS

.fluid-wrapper {
    height:0;
    overflow:hidden;
    position:relative;
    padding-bottom:100%;
}

.fluid-wrapper > img {
    position:absolute;
    display:block;
    width:100%;
}

这里有一个快速的小提琴来详细说明这一点：http://jsfiddle.net/Varinder/PuF2n/1/

【讨论】：