调整窗口大小时，div 的高度不正确

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

 <html>
    <head>
      <script>..</script>
    </head>
    <body>
    <div> </div>
    </body>
    </html>

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

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

另一个疑问：

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

提前谢谢。

使用max-height属性。

喜欢：max-height:450px;

它会帮助你

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

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

你需要使用

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;

您可以使用

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

对于您的第二个问题，您还可以将div 的高度设置为：

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

脚本：

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

有了这个，您可以在您想要的位置获得div 的高度。

这里有一种方法可以做到这一点（如果你知道媒体元素的纵横比）

这个想法是设计一个流畅的div，因为它与媒体元素的纵横比相匹配，我在这里和那里提到过

下面将带您朝着正确的方向前进

.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

相关内容

最新更新

热门标签：