Question

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

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

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

    </body>
    </html>

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

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

另一个疑问：

只有在div中加载内容后，我们才能获得div的高度？

提前致谢。

Answer 1

使用max-height属性。

赞：max-height:450px;

它会帮助你

Answer 2

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

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

Answer 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;

Answer 4

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

对于你的第二个问题，你也可以得到div的高度：

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

脚本：

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

这样你可以得到你想要的div的高度。

Answer 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/

此处有更多示例：http://www.mademyday.de/css-height-equals-width-with-pure-css.html

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

5 个答案: